@bloomreach/react-banana-ui 1.21.1 → 1.22.0

package/dist/components/index.d.ts

@@ -6,3 +6,4 @@ export * from './foundations';
 export * from './inputs';
 export * from './navigation';
 export * from './popovers';
+export * from './surfaces';

package/dist/components/inputs/radio-group/radio-group.types.d.ts

@@ -53,5 +53,5 @@ export interface RadioGroupProps {
      * The value of the selected radio field in a controlled component.
      * This is the value that the radio group starts with.
      */
-    value?: string;
+    value?: string | null;
 }

package/dist/components/surfaces/accordion/accordion/accordion.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import type { AccordionProps } from './accordion.types';
+import './accordion.scss';
+/**
+ * The `Accordion` component represents an individual accordion item.
+ * It contains `AccordionHeader` and `AccordionContent` components to define the
+ * header and the content of the accordion.
+ *
+ * ### Usage
+ * Use the `Accordion` component to create a collapsible section with a header and content.
+ *
+ * ```tsx
+ * import { AccordionGroup, Accordion, AccordionHeader, AccordionContent } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyCustomComponent() {
+ *   return (
+ *     <AccordionGroup>
+ *       <Accordion value="banana-facts">
+ *         <AccordionHeader>Banana facts</AccordionHeader>
+ *         <AccordionContent>
+ *           Bananas are a great source of potassium and can help replenish electrolytes after exercise.
+ *         </AccordionContent>
+ *       </Accordion>
+ *       <Accordion>...</Accordion>
+ *       <Accordion>...</Accordion>
+ *     </AccordionGroup>
+ *   );
+ * }
+ * ```
+ */
+declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Accordion;

package/dist/components/surfaces/accordion/accordion/accordion.types.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export interface AccordionProps {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+    /**
+     * A unique value for the item.
+     */
+    value?: string;
+}

package/dist/components/surfaces/accordion/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Accordion } from './accordion';
+export type { AccordionProps } from './accordion.types';

package/dist/components/surfaces/accordion/accordion-content/accordion-content.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import type { AccordionContentProps } from './accordion-content.types';
+import './accordion-content.scss';
+/**
+ * The `AccordionContent` component contains the content that is revealed or hidden when the `AccordionHeader`
+ * is clicked. It is typically used to display detailed information related to the header.
+ *
+ * ### Usage
+ * Place the `AccordionContent` component inside an `Accordion` component to define the content of the accordion.
+ *
+ * ```tsx
+ * import { AccordionGroup, Accordion, AccordionHeader, AccordionContent } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyCustomComponent() {
+ *   return (
+ *     <AccordionGroup>
+ *       <Accordion value="banana-facts">
+ *         <AccordionHeader>Banana facts</AccordionHeader>
+ *         <AccordionContent>
+ *           Bananas are a great source of potassium and can help replenish electrolytes after exercise.
+ *         </AccordionContent>
+ *       </Accordion>
+ *       <Accordion>...</Accordion>
+ *       <Accordion>...</Accordion>
+ *     </AccordionGroup>
+ *   );
+ * }
+ * ```
+ */
+declare const AccordionContent: import("react").ForwardRefExoticComponent<AccordionContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export default AccordionContent;

package/dist/components/surfaces/accordion/accordion-content/accordion-content.types.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export interface AccordionContentProps {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+    /**
+     * Used to force mounting when more control is needed.
+     * @default false
+     */
+    keepMounted?: boolean;
+}

package/dist/components/surfaces/accordion/accordion-content/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AccordionContent } from './accordion-content';
+export type { AccordionContentProps } from './accordion-content.types';

package/dist/components/surfaces/accordion/accordion-filter-header/accordion-filter-header.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import type { AccordionFilterHeaderProps } from './accordion-filter-header.types';
+import './accordion-filter-header.scss';
+/**
+ * The `AccordionFilterHeader` component is a wrapper around `AccordionHeader`.
+ * It has added functionality to support `Reset` button. Ideally should only be used with `plain` styling.
+ *
+ * ### Usage
+ * Place the `AccordionFilterHeader` component inside an `Accordion` component to define the header of the accordion.
+ *
+ * ```tsx
+ * import { AccordionGroup, Accordion, AccordionFilterHeader, AccordionContent } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyCustomComponent() {
+ *   return (
+ *     <AccordionGroup>
+ *       <Accordion value="banana-facts">
+ *         <AccordionFilterHeader showReset onResetClick={(e) => handleResetClick(e)}>
+ *           Banana facts
+ *         </AccordionFilterHeader>
+ *         <AccordionContent>
+ *           Bananas are a great source of potassium and can help replenish electrolytes after exercise.
+ *         </AccordionContent>
+ *       </Accordion>
+ *       <Accordion>...</Accordion>
+ *       <Accordion>...</Accordion>
+ *     </AccordionGroup>
+ *   );
+ * }
+ * ```
+ */
+declare const AccordionFilterHeader: import("react").ForwardRefExoticComponent<AccordionFilterHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export default AccordionFilterHeader;

package/dist/components/surfaces/accordion/accordion-filter-header/accordion-filter-header.types.d.ts

@@ -0,0 +1,15 @@
+import type { MouseEventHandler } from 'react';
+import type { AccordionHeaderProps } from '../accordion-header';
+export interface AccordionFilterHeaderProps extends AccordionHeaderProps {
+    /**
+     * If `true`, the reset button will be displayed on the side.
+     * @default false
+     */
+    showReset?: boolean;
+    /**
+     * Callback fired when `Reset` button is clicked.
+     * When this function is `undefined`, the `Reset` button will not be rendered.
+     * Ideally to be used only on `plain` styling.
+     */
+    onResetClick?: MouseEventHandler<HTMLButtonElement>;
+}

package/dist/components/surfaces/accordion/accordion-filter-header/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AccordionFilterHeader } from './accordion-filter-header';
+export type { AccordionFilterHeaderProps } from './accordion-filter-header.types';

package/dist/components/surfaces/accordion/accordion-group/accordion-group-context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { AccordionGroupContextProps } from './accordion-group.types';
+declare const AccordionGroupContext: import("react").Context<AccordionGroupContextProps | null>;
+export declare function useAccordionGroupContext(): AccordionGroupContextProps | null;
+export default AccordionGroupContext;

package/dist/components/surfaces/accordion/accordion-group/accordion-group.d.ts

@@ -0,0 +1,4 @@
+import type { AccordionGroupComponentType } from './accordion-group.types';
+import './accordion-group.scss';
+declare const _default: AccordionGroupComponentType;
+export default _default;

package/dist/components/surfaces/accordion/accordion-group/accordion-group.types.d.ts

@@ -0,0 +1,60 @@
+import { ForwardedRef, ReactElement, ReactNode } from 'react';
+export type AccordionValue<Multiple> = Multiple extends true ? string[] : string;
+export type AccordionStyling = 'plain' | 'styled';
+export type AccordionGroupProps<Multiple extends boolean> = {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The content of the component.
+     */
+    children?: ReactNode;
+    /**
+     * Determines whether one or multiple items can be opened at the same time.
+     * @default 'false'
+     */
+    multiple?: Multiple;
+    /**
+     * The controlled stateful value of the accordion item whose content is expanded.
+     */
+    value?: AccordionValue<Multiple>;
+    /**
+     * The value of the item whose content is expanded when the accordion is initially rendered.
+     * Use `defaultValue` if you do not need to control the state of an accordion.
+     */
+    defaultValue?: AccordionValue<Multiple>;
+    /**
+     * The callback that fires when the state of the accordion changes.
+     */
+    onValueChange?: (value: AccordionValue<Multiple>) => void;
+    /**
+     * Whether an accordion item cannot be collapsed after it has been opened.
+     * Only applicable for `single` accordion type.
+     * @default false
+     */
+    nonCollapsible?: boolean;
+    /**
+     * If `true`, the divider between accordions will be hidden.
+     * Only applicable for `plain` accordion styling.
+     */
+    disableDivider?: boolean;
+    /**
+     * Styling of the accordion.
+     * @default 'plain'
+     */
+    styling?: AccordionStyling;
+};
+export interface AccordionGroupContextProps {
+    styling: AccordionStyling;
+    disableDivider?: boolean;
+}
+export interface AccordionMetadata {
+    ref: React.RefObject<HTMLElement>;
+}
+export interface AccordionGroupComponentType {
+    <Multiple extends boolean = false>(props: AccordionGroupProps<Multiple> & {
+        ref?: ForwardedRef<HTMLDivElement>;
+    }): ReactElement | null;
+    displayName?: string | undefined;
+}

package/dist/components/surfaces/accordion/accordion-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AccordionGroup } from './accordion-group';
+export type { AccordionGroupContextProps, AccordionGroupProps, AccordionStyling } from './accordion-group.types';

package/dist/components/surfaces/accordion/accordion-header/accordion-header.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import type { AccordionHeaderProps } from './accordion-header.types';
+import './accordion-header.scss';
+/**
+ * The `AccordionHeader` component defines the clickable header of the accordion.
+ * When clicked, it toggles the visibility of the `AccordionContent`.
+ *
+ * ### Usage
+ * Place the `AccordionHeader` component inside an `Accordion` component to define the header of the accordion.
+ *
+ * ```tsx
+ * import { AccordionGroup, Accordion, AccordionHeader, AccordionContent } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyCustomComponent() {
+ *   return (
+ *     <AccordionGroup>
+ *       <Accordion value="banana-facts">
+ *         <AccordionHeader>Banana facts</AccordionHeader>
+ *         <AccordionContent>
+ *           Bananas are a great source of potassium and can help replenish electrolytes after exercise.
+ *         </AccordionContent>
+ *       </Accordion>
+ *       <Accordion>...</Accordion>
+ *       <Accordion>...</Accordion>
+ *     </AccordionGroup>
+ *   );
+ * }
+ * ```
+ */
+declare const AccordionHeader: import("react").ForwardRefExoticComponent<AccordionHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export default AccordionHeader;

package/dist/components/surfaces/accordion/accordion-header/accordion-header.types.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export interface AccordionHeaderProps {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The title content of the component.
+     */
+    children?: ReactNode;
+    /**
+     * Description of the accordion.
+     * Ideally to be used only on `styled` styling.
+     */
+    description?: string;
+}

package/dist/components/surfaces/accordion/accordion-header/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AccordionHeader } from './accordion-header';
+export type { AccordionHeaderProps } from './accordion-header.types';

package/dist/components/surfaces/accordion/accordion.qa.stories.d.ts

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

package/dist/components/surfaces/accordion/accordion.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { AccordionGroup, AccordionGroupProps } from './accordion-group';
+declare const meta: Meta<typeof AccordionGroup>;
+export default meta;
+export type Story = StoryObj<typeof AccordionGroup<false>>;
+export declare const Basic: Story;
+export declare const Controlled: Story;
+export declare const Multiple: StoryObj<AccordionGroupProps<true>>;
+export declare const MultipleControlled: StoryObj<AccordionGroupProps<true>>;
+export declare const NonCollapsible: Story;
+export declare const WithoutDivider: Story;
+export declare const KeepMounted: Story;
+export declare const FiltersAndReset: Story;
+export declare const Styled: StoryObj<AccordionGroupProps<true>>;

package/dist/components/surfaces/accordion/index.d.ts

@@ -0,0 +1,5 @@
+export * from './accordion';
+export * from './accordion-content';
+export * from './accordion-filter-header';
+export * from './accordion-group';
+export * from './accordion-header';

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

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