@bloomreach/react-banana-ui 1.26.0 → 1.27.1

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

@@ -1,13 +1,13 @@
 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;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
     /**
      * Indicates if the table has pagination.
      * If `true`, the component will add a CSS class to the `TableCell` to apply specific styles.

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

@@ -1,11 +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;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
 }

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

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

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

@@ -7,14 +7,14 @@ export interface TableRowContextProps {
     highlighted: boolean;
 }
 export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * The content of the component, normally `TableCell`.
      */
     children?: ReactNode;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
     /**
      * If `true`, the table row will have the disabled shading.
      * @default false

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

@@ -1,13 +1,13 @@
 import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 export interface TableSortLabelProps {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * The content of the component.
      */
     children?: ReactNode;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
     /**
      * The current sorting direction of the column.
      * @default false
@@ -16,5 +16,5 @@ export interface TableSortLabelProps {
     /**
      * The event handler for the click event.
      */
-    onClick?: (event: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void;
+    onClick?: (event: KeyboardEvent<HTMLSpanElement> | MouseEvent<HTMLSpanElement>) => void;
 }

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

@@ -1,5 +1,10 @@
 import { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react';
 export interface TagProps {
+    /**
+     * If `true`, the tag has borders.
+     * @default false
+     */
+    bordered?: boolean;
     /**
      * The content of the component.
      */
@@ -9,20 +14,10 @@ export interface TagProps {
      */
     className?: string;
     /**
-     * If `true`, the tag has borders.
-     * @default false
-     */
-    bordered?: boolean;
-    /**
-     * If `true`, the tag is not interactable but can be dismissible.
-     * The state should not change on click.
+     * If `true`, the tag is disabled.
      * @default false
      */
-    readOnly?: boolean;
-    /**
-     * Callback fired when component is clicked.
-     */
-    onClick?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+    disabled?: boolean;
     /**
      * 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`.
@@ -30,16 +25,21 @@ export interface TagProps {
      */
     dismissible?: boolean;
     /**
-     * If `true`, the tag is disabled.
-     * @default false
+     * Display an icon at the beginning of the tag.
      */
-    disabled?: boolean;
+    icon?: ReactElement;
+    /**
+     * Callback fired when component is clicked.
+     */
+    onClick?: (event: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement>) => void;
     /**
      * Callback fired when tag is closed or dismissed.
      */
-    onDismiss?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+    onDismiss?: (event: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement>) => void;
     /**
-     * Display an icon at the beginning of the tag.
+     * If `true`, the tag is not interactable but can be dismissible.
+     * The state should not change on click.
+     * @default false
      */
-    icon?: ReactElement;
+    readOnly?: boolean;
 }

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

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

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

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as TagGroup } from './tag-group';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof TagGroup>;
 export default meta;
 export type Story = StoryObj<typeof TagGroup>;

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

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
 export interface TagGroupProps {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
     /**
      * The content of the component.
      */
     children?: ReactNode;
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
 }

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

@@ -1,3 +1,24 @@
 import { TypographyComponent } from './typography.types';
-declare const _default: TypographyComponent;
-export default _default;
+/**
+ * Typography component is used to render headings, texts, links.
+ * This is a polymorphic component. The root tag can be set using `as` prop
+ * It will render appropriate HTML tag for different variants.
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { Typography, Text } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyCustomComponent() {
+ *   return <div>
+ *     <Typography variant="heading-1">Banana design</Typography>
+ *     <Typography variant="heading-5" color="subtl">This is a subheading for banana design</Typography>
+ *     <Typography variant="text" color="body">
+ *       Lorem ipsum dolor sit amet consectetur adipisicing elit
+ *     </Typography>
+ *   </div>
+ * }
+ * ```
+ */
+declare const Typography: TypographyComponent;
+export default Typography;

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

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

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

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as Typography } from './typography';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof Typography>;
 export default meta;
 export type Story = StoryObj<typeof Typography>;

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

@@ -1,46 +1,45 @@
 import { default as React } from 'react';
 import { PolymorphicComponentPropsWithRef, ResolveRoot, VariantMapping } from '../../../utils';
-interface TypographyInternalProps<Variant extends keyof TypographyVariantMapping | undefined> {
+export interface TypographyComponent {
     /**
-     * Color of typography element.
-     * If `undefined`, the CSS color value will be inherited.
+     * When `as` prop is defined.
      */
-    color?: 'body' | 'subtl' | 'link' | 'success' | 'warning' | 'negative';
+    <RootElement extends React.ElementType>(props: PolymorphicComponentPropsWithRef<RootElement, TypographyInternalProps<keyof TypographyVariantMapping>> & {
+        as: RootElement;
+    }): JSX.Element | null;
     /**
-     * Variant of typography.
-     * If `undefined`, the CSS font value will be inherited.
+     * When `as` prop is not defined.
      */
-    variant?: Variant;
+    <Variant extends keyof TypographyVariantMapping | undefined>(props: PolymorphicComponentPropsWithRef<Variant extends keyof TypographyVariantMapping ? TypographyVariantMapping[Variant] : TypographyVariantMapping['default'], TypographyInternalProps<Variant>>): JSX.Element | null;
+    displayName?: string;
 }
+export type TypographyProps<RootElement extends React.ElementType | undefined, Variant extends keyof TypographyVariantMapping | undefined> = PolymorphicComponentPropsWithRef<ResolveRoot<RootElement, Variant, TypographyVariantMapping>, TypographyInternalProps<Variant>>;
 export type TypographyVariantMapping = VariantMapping<'p'> & {
-    link: 'a';
-    'link-small': 'a';
-    'heading-xl': 'h1';
     'heading-1': 'h1';
     'heading-2': 'h2';
     'heading-3': 'h3';
     'heading-4': 'h4';
     'heading-5': 'h5';
+    'heading-xl': 'h1';
+    link: 'a';
+    'link-small': 'a';
     text: 'p';
     'text-bold': 'p';
-    'text-small': 'p';
-    'text-small-bold': 'p';
     'text-mono': 'code';
     'text-mono-small': 'code';
+    'text-small': 'p';
+    'text-small-bold': 'p';
 };
-export type TypographyProps<RootElement extends React.ElementType | undefined, Variant extends keyof TypographyVariantMapping | undefined> = PolymorphicComponentPropsWithRef<ResolveRoot<RootElement, Variant, TypographyVariantMapping>, TypographyInternalProps<Variant>>;
-export type TypographyComponent = {
+interface TypographyInternalProps<Variant extends keyof TypographyVariantMapping | undefined> {
     /**
-     * When `as` prop is defined.
+     * Color of typography element.
+     * If `undefined`, the CSS color value will be inherited.
      */
-    <RootElement extends React.ElementType>(props: {
-        as: RootElement;
-    } & PolymorphicComponentPropsWithRef<RootElement, TypographyInternalProps<keyof TypographyVariantMapping>>): JSX.Element | null;
+    color?: 'body' | 'link' | 'negative' | 'subtl' | 'success' | 'warning';
     /**
-     * When `as` prop is not defined.
+     * Variant of typography.
+     * If `undefined`, the CSS font value will be inherited.
      */
-    <Variant extends keyof TypographyVariantMapping | undefined>(props: PolymorphicComponentPropsWithRef<Variant extends keyof TypographyVariantMapping ? TypographyVariantMapping[Variant] : TypographyVariantMapping['default'], TypographyInternalProps<Variant>>): JSX.Element | null;
-    displayName?: string;
-    propTypes?: any;
-};
+    variant?: Variant;
+}
 export {};

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

@@ -1,13 +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 { MenuButton } from './menu-button';
 export type { MenuButtonProps } from './menu-button';
+export { MenuContent } from './menu-content';
 export type { MenuContentProps } from './menu-content';
+export { MenuGroup } from './menu-group';
 export type { MenuGroupProps } from './menu-group';
+export { MenuGroupLabel } from './menu-group-label';
 export type { MenuGroupLabelProps } from './menu-group-label';
+export { MenuItem } from './menu-item';
 export type { MenuItemProps } from './menu-item';
+export { MenuSeparator } from './menu-separator';

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

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

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

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

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

@@ -1,3 +1,2 @@
-import { MenuButtonProps } from './menu-button.types';
-declare const MenuButton: import('react').ForwardRefExoticComponent<MenuButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const MenuButton: import('react').ForwardRefExoticComponent<import('../../..').ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
 export default MenuButton;

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

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

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

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

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

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as MenuContent } from './menu-content';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export type Story = StoryObj<typeof MenuContent>;

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

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

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

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

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

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

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

@@ -4,15 +4,15 @@ 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;
+    /**
+     * Event fired on click or selection of an item
+     */
+    onClick?: MouseEventHandler<HTMLElement>;
     /**
      * Icon displayed before the content
      */

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

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

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

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
-export declare function SplitButton(): JSX.Element;
 export declare function GlobalRankingRule(): JSX.Element;
+export declare function SplitButton(): JSX.Element;

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

@@ -1,5 +1,5 @@
-import { Meta } from '@storybook/react';
 import { Story } from './alert.stories';
+import { Meta } from '@storybook/react';
 import { default as Alert } from './alert';
 declare const meta: Meta<typeof Alert>;
 export default meta;

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

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

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

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-export type AlertType = 'error' | 'info' | 'success' | 'warning';
 export interface AlertProps {
     /**
      * Actions to be displayed at the bottom of the message. Typically used for buttons.
@@ -17,25 +16,25 @@ export interface AlertProps {
      * Override the icon displayed before the children.
      * Unless provided, the icon is mapped to the value of the `type` prop.
      * Set to `false` to remove the icon.
-    */
-    icon?: ReactNode | false;
+     */
+    icon?: false | ReactNode;
     /**
      * Callback when the close button is clicked.
      * When provided a close icon button is displayed that triggers the callback when clicked.
      */
     onClose?: () => void;
-    /**
-     * The type of alert to display.
-     * This determines the icon displayed before the children.
-     * @default 'info'
-     */
-    type?: AlertType;
     /**
      * The ARIA role attribute of the element.
      * @default 'alert'
      * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role
      */
     role?: string;
+    /**
+     * The type of alert to display.
+     * This determines the icon displayed before the children.
+     * @default 'info'
+     */
+    type?: AlertType;
 }
 export interface AlertTitleProps {
     /**
@@ -47,3 +46,4 @@ export interface AlertTitleProps {
      */
     className?: string;
 }
+export type AlertType = 'error' | 'info' | 'success' | 'warning';

package/dist/components/foundations/icon/deprecated/index.d.ts

@@ -1,4 +1,4 @@
-export { default as NextStepIcon } from './NextStepIcon';
-export { default as SortAscIcon } from './SortAscIcon';
-export { default as SortDescIcon } from './SortDescIcon';
-export { default as SortInactiveIcon } from './SortInactiveIcon';
+export { default as NextStepIcon } from './next-step-icon';
+export { default as SortAscIcon } from './sort-asc-icon';
+export { default as SortDescIcon } from './sort-desc-icon';
+export { default as SortInactiveIcon } from './sort-inactive-icon';

package/dist/components/foundations/icon/icon.d.ts

@@ -20,6 +20,6 @@ import { IconProps } from './icon.types';
  *   <CustomSvgIcon />
  * </Icon>
  * ```
- * */
+ */
 declare const Icon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<SVGSVGElement>>;
 export default Icon;

package/dist/components/foundations/icon/icon.qa.stories.d.ts

@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/react';
 import { default as Icon } from './icon';
 import { Story } from './icon.stories';
+import { Meta } from '@storybook/react';
 declare const meta: Meta<typeof Icon>;
 export default meta;
 export declare const All: Story;

package/dist/components/foundations/icon/icon.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { default as Icon } from './icon';
+import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof Icon>;
 export default meta;
 export type Story = StoryObj<typeof Icon>;

package/dist/components/foundations/icon/icon.types.d.ts

@@ -1,13 +1,13 @@
 import { ReactElement, SVGAttributes } from 'react';
 export interface IconInstanceProps extends SVGAttributes<SVGElement> {
-    /**
-     * Size of the icon. Sets the width and height on the \<svg\> tag
-     */
-    size?: number;
     /**
      * Color of the icon. Sets the fill color on the \<svg\> tag
      */
     color?: string;
+    /**
+     * Size of the icon. Sets the width and height on the \<svg\> tag
+     */
+    size?: number;
 }
 export interface IconProps extends IconInstanceProps {
     /**