@bloomreach/react-banana-ui 1.9.1 → 1.11.0

package/dist/components/data-display/asset-tag/asset-tag.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import type { AssetTagProps } from './asset-tag.types';
+import './asset-tag.scss';
+/**
+ * The purpose of this component is the visual differentiation of a particular element
+ * on the screen (for example table row). Users can set a custom color for each custom tag
+ * to visually distinguish it from the rest, for better organisation.
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { AssetTag } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyCustomComponent() {
+ *   return <AssetTag>Banana</AssetTag>;
+ * }
+ * ```
+ */
+declare const AssetTag: import("react").ForwardRefExoticComponent<AssetTagProps & import("react").RefAttributes<HTMLDivElement>>;
+export default AssetTag;

package/dist/components/data-display/asset-tag/asset-tag.qa.stories.d.ts

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

package/dist/components/data-display/asset-tag/asset-tag.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import AssetTag from './asset-tag';
+declare const meta: Meta<typeof AssetTag>;
+export default meta;
+export type Story = StoryObj<typeof AssetTag>;
+export declare const Basic: Story;
+export declare const AllVariants: Story;

package/dist/components/data-display/asset-tag/asset-tag.types.d.ts

@@ -0,0 +1,31 @@
+import { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react';
+export interface AssetTagProps {
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * Variant of tag.
+     * @default 'default'
+     */
+    variant?: AssetTagVariant;
+    /**
+     * If `true`, the tag can be dismissed by clicking on close icon.
+     * Removing of the tag needs to be handled by the user using `onDismiss`.
+     * @default false
+     */
+    dismissible?: boolean;
+    /**
+     * Callback fired when tag is closed or dismissed.
+     */
+    onDismiss?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+    /**
+     * Display an icon at the beginning of the tag.
+     */
+    icon?: ReactElement;
+}
+export type AssetTagVariant = 'default' | 'accent-1' | 'accent-2' | 'accent-3' | 'accent-4' | 'accent-5' | 'accent-6' | 'accent-7' | 'accent-8' | 'accent-9';

package/dist/components/data-display/asset-tag/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AssetTag } from './asset-tag';
+export type { AssetTagProps } from './asset-tag.types';

package/dist/components/data-display/filter-tag/filter-tag.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import type { FilterTagProps } from './filter-tag.types';
+import './filter-tag.scss';
+/**
+ * Filter tags are interactive labels used to filter criteria.
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { FilterTag } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyCustomComponent() {
+ *   return <FilterTag>Name</FilterTag>;
+ * }
+ * ```
+ */
+declare const FilterTag: import("react").ForwardRefExoticComponent<FilterTagProps & import("react").RefAttributes<HTMLDivElement>>;
+export default FilterTag;

package/dist/components/data-display/filter-tag/filter-tag.qa.stories.d.ts

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

package/dist/components/data-display/filter-tag/filter-tag.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import FilterTag from './filter-tag';
+declare const meta: Meta<typeof FilterTag>;
+export default meta;
+export type Story = StoryObj<typeof FilterTag>;
+export declare const Basic: Story;
+export declare const Controlled: Story;

package/dist/components/data-display/filter-tag/filter-tag.types.d.ts

@@ -0,0 +1,29 @@
+import { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react';
+export interface FilterTagProps {
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * Allows to control whether the tag is selected.
+     * This is a controlled counterpart of `defaultSelected`
+     */
+    selected?: boolean;
+    /**
+     * If `true`, the tag is initially selected.
+     * @default false
+     */
+    defaultSelected?: boolean;
+    /**
+     * Callback fired when tag's selection changes
+     */
+    onChange?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, selected: boolean) => void;
+    /**
+     * Display an icon at the beginning of the tag.
+     */
+    icon?: ReactElement;
+}

package/dist/components/data-display/filter-tag/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FilterTag } from './filter-tag';
+export type { FilterTagProps } from './filter-tag.types';

package/dist/components/data-display/index.d.ts

@@ -0,0 +1,12 @@
+export * from './asset-tag';
+export * from './filter-tag';
+export * from './input-tag';
+export * from './table-body';
+export * from './table-cell-action';
+export * from './table-cell';
+export * from './table-foot';
+export * from './table-head';
+export * from './table-row';
+export * from './table-sort-label';
+export * from './table';
+export * from './tag-group';

package/dist/components/data-display/input-tag/index.d.ts

@@ -0,0 +1,2 @@
+export { default as InputTag } from './input-tag';
+export type { InputTagProps } from './input-tag.types';

package/dist/components/data-display/input-tag/input-tag.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import type { InputTagProps } from './input-tag.types';
+import './input-tag.scss';
+/**
+ * Input tags are used in auto complete and search inputs.
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { InputTag } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyCustomComponent() {
+ *   return <InputTag>Banana</InputTag>;
+ * }
+ * ```
+ */
+declare const InputTag: import("react").ForwardRefExoticComponent<InputTagProps & import("react").RefAttributes<HTMLDivElement>>;
+export default InputTag;

package/dist/components/data-display/input-tag/input-tag.qa.stories.d.ts

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

package/dist/components/data-display/input-tag/input-tag.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import InputTag from './input-tag';
+declare const meta: Meta<typeof InputTag>;
+export default meta;
+export type Story = StoryObj<typeof InputTag>;
+export declare const Basic: Story;
+export declare const Controlled: Story;
+export declare const AllStates: Story;
+export declare const AllStatesWithIcon: Story;

package/dist/components/data-display/input-tag/input-tag.types.d.ts

@@ -0,0 +1,50 @@
+import { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react';
+export interface InputTagProps {
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * Allows to control whether the tag is selected.
+     * This is a controlled counterpart of `defaultSelected`
+     */
+    selected?: boolean;
+    /**
+     * If `true`, the tag is initially selected.
+     * @default false
+     */
+    defaultSelected?: boolean;
+    /**
+     * Callback fired when tag's selection changes.
+     */
+    onChange?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, selected: boolean) => void;
+    /**
+     * If `true`, the tag can be dismissed by clicking on close icon.
+     * Removing of the tag needs to be handled by the user using `onDismiss`.
+     * @default false
+     */
+    dismissible?: boolean;
+    /**
+     * If `true`, the tag is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the tag is not interactable but can be dismissible.
+     * The state should not change on click.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Callback fired when tag is closed or dismissed.
+     */
+    onDismiss?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+    /**
+     * Display an icon at the beginning of the tag.
+     */
+    icon?: ReactElement;
+}

package/dist/components/data-display/internal.d.ts

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

package/dist/components/data-display/table/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Table } from './table';
+export type { TableProps } from './table.types';

package/dist/components/data-display/table/table-context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { TableContextProps } from './table.types';
+declare const TableContext: import("react").Context<TableContextProps | null>;
+export declare function useTableContext(): TableContextProps | null;
+export default TableContext;

package/dist/components/data-display/table/table-section-context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { TableSectionContextProps } from './table.types';
+declare const TableSectionContext: import("react").Context<TableSectionContextProps | null>;
+export declare function useTableSectionContext(): TableSectionContextProps | null;
+export default TableSectionContext;

package/dist/components/data-display/table/table.d.ts

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+import type { TableProps } from './table.types';
+import './table.scss';
+/**
+ * The components like `Table`, `TableHead`, `TableBody`, `TableRow`, `TableCell` etc.
+ * are wrappers for the HTML table elements `table`, `thead`, `tbody`, `tr`, `th`, `td` etc.
+ * These components are used to build a table in a more structured way and can accept all based props.
+ *
+ * A table displays data in rows and columns. They can be fully customized.
+ * The table displays information in a way that's easy to scan so that users can look for patterns and insights.
+ * They can be embedded in primary content. They can include:
+ * - A corresponding visualization
+ * - Pagination
+ * - Tools to query and manipulate data
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { Table, TableHeader, TableBody, TableFoot, TableCell } from '@bloomreach/react-banana-ui';
+ *
+ * export default function CustomStaticTable() {
+ *   return (
+ *     <Table>
+ *       <TableHeader>
+ *         <TableRow>
+ *           <TableCell>#</TableCell>
+ *         </TableRow>
+ *         <TableRow>
+ *           <TableCell>Name</TableCell>
+ *         </TableRow>
+ *       </TableHeader>
+ *       <TableBody>
+ *         <TableRow>
+ *           <TableCell>0</TableCell>
+ *           <TableCell>Foo</TableCell>
+ *         </TableRow>
+ *         <TableRow>
+ *           <TableCell>1</TableCell>
+ *           <TableCell>Bar</TableCell>
+ *         </TableRow>
+ *         <TableRow>
+ *           <TableCell>2</TableCell>
+ *           <TableCell>Baz</TableCell>
+ *         </TableRow>
+ *      </TableBody>
+ *      <TableFoot>
+ *         <TableRow>
+ *           <TableCell colSpan={2}>This table has 3 rows</TableCell>
+ *         </TableRow>
+ *      </TableFoot>
+ *    </Table>
+ *   );
+ * }
+ * ```
+ */
+declare const Table: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLTableElement>>;
+export default Table;

package/dist/components/data-display/table/table.qa.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/react';
+import { type Story } from './table.stories';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: Story;
+export declare const Sortable: Story;
+export declare const WithPagination: Story;
+export declare const WithRowAction: Story;

package/dist/components/data-display/table/table.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Table from './table';
+declare const meta: Meta<typeof Table>;
+export default meta;
+export type Story = StoryObj<typeof Table>;
+export declare const Basic: Story;
+export declare const Sortable: Story;
+export declare const WithPagination: Story;
+export declare const WithBulkActions: Story;
+export declare const WithRowAction: Story;
+export declare const ExpandableRows: Story;
+export declare const Searchable: Story;

package/dist/components/data-display/table/table.types.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode, HTMLAttributes } from 'react';
+type TableRowDensity = 'small' | 'medium' | 'large';
+export interface TableContextProps {
+    rowDensity: TableRowDensity;
+}
+export interface TableSectionContextProps {
+    variant: 'head' | 'body' | 'foot';
+    hasPagination?: boolean;
+}
+export interface TableProps extends HTMLAttributes<HTMLTableElement> {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+    rowDensity?: TableRowDensity;
+}
+export {};

package/dist/components/data-display/table-body/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TableBody } from './table-body';
+export type { TableBodyProps } from './table-body.types';

package/dist/components/data-display/table-body/table-body.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { TableBodyProps } from './table-body.types';
+import './table-body.scss';
+/**
+ * The component renders a `<tbody>` element and it should contain `TableRow` components.
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { Table, TableBody, TableRow, TableCell } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyCustomBody() {
+ *   return (
+ *     <TableBody className="custom-body">
+ *       <TableRow>
+ *         <TableCell>This cell will be rendered as `<td>`</TableCell>
+ *       </TableRow>
+ *    </TableBody>
+ *   );
+ * }
+ * ```
+ */
+declare const TableBody: import("react").ForwardRefExoticComponent<TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+export default TableBody;

package/dist/components/data-display/table-body/table-body.types.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The content of the component, normally `TableRow`.
+     */
+    children?: ReactNode;
+}

package/dist/components/data-display/table-cell/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TableCell } from './table-cell';
+export type { TableCellProps } from './table-cell.types';

package/dist/components/data-display/table-cell/table-cell.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import type { TableCellProps } from './table-cell.types';
+import './table-cell.scss';
+/**
+ * The component renders a `<th>` element when the parent context is a header
+ * or otherwise a `<td>` element.
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { Table, TableHeader, TableBody, TableFoot, TableCell } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyCustomTable() {
+ *   return (
+ *     <Table>
+ *       <TableHeader>
+ *         <TableRow>
+ *           <TableCell>This cell will be rendered as `<th>`</TableCell>
+ *         </TableRow>
+ *       </TableHeader>
+ *       <TableBody>
+ *         <TableRow>
+ *           <TableCell>This cell will be rendered as `<td>`</TableCell>
+ *         </TableRow>
+ *      </TableBody>
+ *      <TableFoot>
+ *         <TableRow>
+ *           <TableCell>This cell will be rendered as `<td>`</TableCell>
+ *         </TableRow>
+ *      </TableFoot>
+ *    </Table>
+ *   );
+ * }
+ * ```
+ */
+declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+export default TableCell;

package/dist/components/data-display/table-cell/table-cell.types.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+type TableCellBaseProps = ThHTMLAttributes<HTMLTableCellElement> & TdHTMLAttributes<HTMLTableCellElement>;
+export interface TableCellProps extends TableCellBaseProps {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+}
+export {};

package/dist/components/data-display/table-cell-action/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TableCellAction } from './table-cell-action';
+export type { TableCellActionProps } from './table-cell-action.types';

package/dist/components/data-display/table-cell-action/table-cell-action.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import type { TableCellActionProps } from './table-cell-action.types';
+import './table-cell-action.scss';
+/**
+ * This component renders content in a table cell when a row is hovered or focused.
+ * It should be used only inside `<TableRow>` component.
+ *
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { TableCellAction } from '@bloomreach/react-banana-ui';
+ *
+ * export default function RowWithAction() {
+ *   return (
+ *     <TableRow key={row.id}>
+ *       <TableCell>Foo</TableCell>
+ *       <TableCell>Bar</TableCell>
+ *       <TableCell>
+ *         <TableCellAction>
+ *           <Button onClick={() => console.log('Edit')}>Edit</Button>
+ *         </TableCellAction>
+ *       </TableCell>
+ *     </TableRow>
+ *   );
+ * }
+ * ```
+ */
+declare const TableCellAction: import("react").ForwardRefExoticComponent<TableCellActionProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TableCellAction;

package/dist/components/data-display/table-cell-action/table-cell-action.types.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface TableCellActionProps {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The content of the component, usually a <Button>, <MenuButton> or <ButtonGroup>.
+     */
+    children?: ReactNode;
+}

package/dist/components/data-display/table-foot/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TableFoot } from './table-foot';
+export type { TableFootProps } from './table-foot.types';

package/dist/components/data-display/table-foot/table-foot.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { TableFootProps } from './table-foot.types';
+import './table-foot.scss';
+/**
+ * The component renders a `<tfoot>` element and should contain `TableRow` components.
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { TableFoot, TableRow, TableCell } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyCustomTableFooter() {
+ *   return (
+*      <TableFoot className="custom-footer">
+*        <TableRow>
+*          <TableCell>This cell will be rendered as `<td>`</TableCell>
+*        </TableRow>
+*     </TableFoot>
+ *   );
+ * }
+ * ```
+ */
+declare const TableFoot: import("react").ForwardRefExoticComponent<TableFootProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+export default TableFoot;

package/dist/components/data-display/table-foot/table-foot.types.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export interface TableFootProps {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The content of the component, normally `TableRow`.
+     */
+    children?: ReactNode;
+    /**
+     * Indicates if the table has pagination.
+     * If `true`, the component will add a CSS class to the `TableCell` to apply specific styles.
+     * @default false
+     */
+    hasPagination?: boolean;
+}

package/dist/components/data-display/table-head/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TableHead } from './table-head';
+export type { TableHeadProps } from './table-head.types';

package/dist/components/data-display/table-head/table-head.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { TableHeadProps } from './table-head.types';
+import './table-head.scss';
+/**
+ * The component renders a `<thead>` element and it should contain `TableRow` components.
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { TableHead, TableRow, TableCell } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyCustomHead() {
+ *   return (
+ *     <TableHead className="custom-head">
+ *       <TableRow>
+ *         <TableCell>This cell will be rendered as `<th>`</TableCell>
+ *       </TableRow>
+ *    </TableHead>
+ *   );
+ * }
+ * ```
+ */
+declare const TableHead: import("react").ForwardRefExoticComponent<TableHeadProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+export default TableHead;

package/dist/components/data-display/table-head/table-head.types.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface TableHeadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The content of the component, normally `TableRow`.
+     */
+    children?: ReactNode;
+}

package/dist/components/data-display/table-row/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TableRow } from './table-row';
+export type { TableRowProps } from './table-row.types';

package/dist/components/data-display/table-row/table-row-context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { TableRowContextProps } from './table-row.types';
+declare const TableRowContext: import("react").Context<TableRowContextProps | null>;
+export declare function useTableRowContext(): TableRowContextProps | null;
+export default TableRowContext;