@bloomreach/react-banana-ui 1.11.0 → 1.12.0

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

@@ -14,3 +14,4 @@ export declare const CustomIcon: Story;
  */
 export declare const Refs: Story;
 export declare const All: Story;
+export declare const Showcase: Story;

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

@@ -0,0 +1,23 @@
+import type { AutocompleteComponentType } from './autocomplete.types';
+import './autocomplete.scss';
+/**
+ * Autocomplete allows a user to search for value(s) to select from a list.
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { Autocomplete } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyAutocomplete() {
+ *   return (
+ *     <Autocomplete
+ *       options={['Banana', 'Apple', 'Orange', 'Pineapple', 'Strawberry', 'Grape', 'Watermelon']}
+ *       placeholder="Select a fruit"
+ *       onChange={(_, newValue) => console.log(newValue)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare const _default: AutocompleteComponentType;
+export default _default;

package/dist/components/inputs/autocomplete/autocomplete.qa.stories.d.ts

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/react';
+import { ControlledMultipleValue as ControlledMultipleValueStory, ControlledSingleValue as ControlledSingleValueStory, CustomOptionLabel as CustomOptionLabelStory, HideSelectedOptions as HideSelectedOptionsStory, Multiple as MultipleStory, type Story } from './autocomplete.stories';
+import Autocomplete from './autocomplete';
+declare const meta: Meta<typeof Autocomplete>;
+export default meta;
+export declare const Basic: Story;
+export declare const DifferentStates: Story;
+export declare const Single: Story;
+export declare const ControlledSingleValue: typeof ControlledSingleValueStory;
+export declare const Multiple: typeof MultipleStory;
+export declare const ControlledMultipleValue: typeof ControlledMultipleValueStory;
+export declare const HideSelectedOptions: typeof HideSelectedOptionsStory;
+export declare const GroupedOptions: Story<{
+    group: string;
+    label: string;
+}>;
+export declare const DisabledOptions: Story;
+export declare const CustomOptionLabel: typeof CustomOptionLabelStory;
+export declare const Loading: Story;

package/dist/components/inputs/autocomplete/autocomplete.stories.d.ts

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Autocomplete from './autocomplete';
+declare const meta: Meta<typeof Autocomplete>;
+export default meta;
+export type Story<Value extends NonNullable<unknown> = string, Multiple extends boolean = false> = StoryObj<typeof Autocomplete<Value, Multiple>>;
+declare const fruits: string[];
+export declare const Basic: Story;
+export declare const DefaultValue: Story;
+export declare const ControlledSingleValue: Story;
+export declare const Multiple: Story<typeof fruits[0], true>;
+export declare const DefaultValueMultiple: Story<typeof fruits[0], true>;
+export declare const ControlledMultipleValue: Story<typeof fruits[0], true>;
+export declare const HideSelectedOptions: Story<string, true>;
+export declare const GroupedOptions: Story<{
+    label: string;
+    firstLetter: string;
+}>;
+export declare const DisabledOptions: Story<{
+    label: string;
+    id: number;
+}>;
+export declare const CustomOptionLabel: Story<{
+    fruitName: string;
+}>;
+export declare const NoOptionsText: Story<string>;
+export declare const Loading: Story;

package/dist/components/inputs/autocomplete/autocomplete.types.d.ts

@@ -0,0 +1,114 @@
+import type { AutocompleteGroupedOption as MuiBaseAutocompleteGroupedOption } from '@mui/base';
+import { ForwardedRef, ReactElement, ReactNode, SyntheticEvent } from 'react';
+export type AutocompleteValue<Value, Multiple> = Multiple extends true ? Value[] : Value | null;
+export interface AutocompleteProps<AutocompleteOption extends NonNullable<unknown>, Multiple extends boolean> {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * Clear the selected value when clicking the clear icon.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * If `true`, the popup closes after a selection is made.
+     * It is `false` by default when `multiple` is `true`.
+     */
+    closeOnSelect?: boolean;
+    /**
+     * The default selected value. Use when the component is not controlled.
+     * The value must be an array when `multiple` is `true`.
+     */
+    defaultValue?: AutocompleteValue<AutocompleteOption, Multiple>;
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Used to determine if an option is disabled.
+     */
+    getOptionDisabled?: (option: AutocompleteOption) => boolean;
+    /**
+     * Used to determine the string value for a given option.
+     * @default (option) => option
+     */
+    getOptionLabel?: (option: AutocompleteOption) => string;
+    /**
+     * If provided, the options will be grouped under the returned string.
+     * The groupBy value is also used as the text for group headings
+     */
+    groupBy?: (option: AutocompleteOption) => string;
+    /**
+     * If `true`, the selected options are not displayed.
+     * @default false
+     */
+    hideSelectedOptions?: boolean;
+    /**
+     * If `true`, the component is in a loading state.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * The text to display when the component is in a loading state.
+     * @default "Loading..."
+     */
+    loadingText?: string;
+    /**
+     * If `true`, the component allows multiple selections.
+     * @default false
+     */
+    multiple?: Multiple;
+    /**
+     * Text to display when there are no options.
+     * @default "No options"
+     */
+    noOptionsText?: string;
+    /**
+     * Callback fired when the value changes.
+     */
+    onChange?: (event: SyntheticEvent, value: AutocompleteValue<AutocompleteOption, Multiple>) => void;
+    /**
+     * Callback fired when the popup closes.
+     */
+    onClose?: () => void;
+    /**
+     * Callback fired when the popup opens.
+     */
+    onOpen?: () => void;
+    /**
+     * Array ot options to display.
+     */
+    options: AutocompleteOption[];
+    /**
+     * The input placeholder.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the autocomplete is readonly.
+     */
+    readOnly?: boolean;
+    /**
+     * If `true`, the autocomplete is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The selected value.
+     * Set to `null` in case of single select and `[]` in case of multiple select to clear the selection.
+     * If the value is an object it must have reference equality with the option in order to be selected.
+     */
+    value?: AutocompleteValue<AutocompleteOption, Multiple>;
+}
+export interface AutocompleteGroupedOption<AutocompleteOption extends NonNullable<unknown>> extends MuiBaseAutocompleteGroupedOption<AutocompleteOption> {
+}
+export interface AutocompleteRenderGroupParams extends AutocompleteGroupedOption<object> {
+    children: ReactNode;
+}
+export interface AutocompleteComponentType {
+    <AutocompleteOption extends NonNullable<unknown>, Multiple extends boolean = false>(props: AutocompleteProps<AutocompleteOption, Multiple> & {
+        ref?: ForwardedRef<HTMLElement>;
+    }): ReactElement | null;
+    displayName?: string | undefined;
+}

package/dist/components/inputs/autocomplete/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Autocomplete } from './autocomplete';
+export type { AutocompleteProps } from './autocomplete.types';

package/dist/components/inputs/base-input/base-input.types.d.ts

@@ -1,10 +1,5 @@
-import { ChangeEventHandler, FocusEventHandler, ForwardedRef, InputHTMLAttributes, ReactNode } from 'react';
+import { ChangeEventHandler, FocusEventHandler, ForwardedRef, InputHTMLAttributes, ReactNode, Ref, RefCallback } from 'react';
 export interface BaseInputProps {
-    /**
-     * Automatically adjusts textarea height to match the length of the content within.
-     * When `multiline` is `false`, this prop is ignored.
-     */
-    autoSize?: boolean;
     /**
      * Custom class name for the container of this component.
      */
@@ -39,7 +34,7 @@ export interface BaseInputProps {
     /**
      * The ref to the `input` or `textarea` element.
      */
-    inputRef?: ForwardedRef<HTMLInputElement> | ForwardedRef<HTMLTextAreaElement>;
+    inputRef?: ForwardedRef<HTMLInputElement | HTMLTextAreaElement> | Ref<HTMLInputElement | HTMLTextAreaElement>;
     /**
      * Icon or any element displayed at the end of the `input` or `textarea`.
      */
@@ -54,10 +49,6 @@ export interface BaseInputProps {
      * Works only when `multiline` is `true`.
      */
     minRows?: number;
-    /**
-     * If `true`, a `textarea` element is rendered.
-    */
-    multiline?: boolean;
     /**
      * The `name` attribute of the `input` or `textarea` element.
      */
@@ -90,6 +81,11 @@ export interface BaseInputProps {
      * If `true`, the `input` or `textarea` will be required.
      */
     required?: boolean;
+    /**
+     * Custom render function for the `input` or `textarea` element.
+     * Use this to render a custom `input` or `textarea` element.
+     */
+    renderInput?: (props: InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, ref: RefCallback<HTMLInputElement | HTMLTextAreaElement> | null) => JSX.Element;
     /**
      * Icon or any element displayed at the start of the `input` or `textarea`.
      */

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

@@ -1,5 +1,6 @@
-export * from './checkbox';
+export * from './autocomplete';
 export * from './checkbox-field';
+export * from './checkbox';
 export * from './input-field';
 export * from './select-field';
 export * from './select-option';

package/dist/components/inputs/select-option/select-option.d.ts

@@ -1,4 +1,3 @@
 import type { SelectOptionComponentType } from './select-option.types';
-import './select-option.scss';
 declare const _default: SelectOptionComponentType;
 export default _default;

package/dist/components/lists/internal.d.ts

@@ -1,2 +1,4 @@
+export * from './listbox-group-label';
+export * from './listbox-group';
 export * from './listbox-item';
 export * from './listbox';

package/dist/components/lists/listbox-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ListboxGroup } from './listbox-group';
+export type { ListboxGroupProps } from './listbox-group.types';

package/dist/components/lists/listbox-group/listbox-group.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import type { ListboxGroupProps } from './listbox-group.types';
+import './listbox-group.scss';
+/**
+ * @internal
+ * The `ListboxGroup` component is used to display a list of grouped items aligned with design system styles.
+ * Use the `ListboxItem` component to define the items of the list and `ListboxGroupLabel` to define the group label.
+ *
+ * ### Usage
+ *
+ * import { Listbox, ListboxItem, ListboxGroup, ListboxGroupLabel } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyList() {
+ *   return (
+ *      <Listbox>
+ *        <ListboxGroup>
+ *          <ListboxGroupLabel>Group one</ListboxGroupLabel>
+ *          <ListboxItem>Item 1</ListboxItem>
+ *          <ListboxItem>Item 2</ListboxItem>
+ *          <ListboxItem>Item 3</ListboxItem>
+ *        </ListboxGroup>
+ *        <ListboxGroup>
+ *          <ListboxGroupLabel>Group two</ListboxGroupLabel>
+ *          <ListboxItem>Item 1</ListboxItem>
+ *          <ListboxItem>Item 2</ListboxItem>
+ *          <ListboxItem>Item 3</ListboxItem>
+ *        </ListboxGroup>
+ *      </Listbox>
+ *   );
+ * }
+ */
+declare const ListboxGroup: import("react").ForwardRefExoticComponent<ListboxGroupProps & import("react").RefAttributes<HTMLUListElement>>;
+export default ListboxGroup;

package/dist/components/lists/listbox-group/listbox-group.types.d.ts

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

package/dist/components/lists/listbox-group-label/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ListboxGroupLabel } from './listbox-group-label';
+export type { ListboxGroupLabelProps } from './listbox-group-label.types';

package/dist/components/lists/listbox-group-label/listbox-group-label.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import type { ListboxGroupLabelProps } from './listbox-group-label.types';
+import './listbox-group-label.scss';
+/**
+ * The `ListboxGroupLabel` component is used to display label inside list group.
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { Listbox, ListboxItem, ListboxGroup, ListboxGroupLabel } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyGroupedList() {
+ *   return (
+ *      <Listbox>
+ *        <ListboxGroup>
+ *          <ListboxGroupLabel>Group one</ListboxGroupLabel>
+ *          <ListboxItem>Item 1</ListboxItem>
+ *          <ListboxItem>Item 2</ListboxItem>
+ *          <ListboxItem>Item 3</ListboxItem>
+ *        </ListboxGroup>
+ *        <ListboxGroup>
+ *          <ListboxGroupLabel>Group two</ListboxGroupLabel>
+ *          <ListboxItem>Item 1</ListboxItem>
+ *          <ListboxItem>Item 2</ListboxItem>
+ *          <ListboxItem>Item 3</ListboxItem>
+ *        </ListboxGroup>
+ *      </Listbox>
+ *   );
+ * }
+ * ```
+ */
+declare const ListboxGroupLabel: import("react").ForwardRefExoticComponent<ListboxGroupLabelProps & import("react").RefAttributes<HTMLLIElement>>;
+export default ListboxGroupLabel;

package/dist/components/lists/listbox-group-label/listbox-group-label.types.d.ts

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