@bloomreach/react-banana-ui 1.8.5 → 1.9.0

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

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+export interface BaseFieldProps {
+    /**
+     * Custom class name for the container of this component.
+     */
+    className?: string;
+    /**
+     * The control element to render as the main content of the field.
+     */
+    control: ReactNode;
+    /**
+     * If `true`, the field will indicate an error.
+     */
+    error?: boolean;
+    /**
+     * If `true`, the field will take up the full width of its container.
+     */
+    fullWidth?: boolean;
+    /**
+     * The helper text content.
+     */
+    helperText?: ReactNode;
+    /**
+     * The label content.
+     */
+    label?: ReactNode;
+    /**
+     * The position of the label.
+     * @default 'block-start'
+     */
+    labelPosition?: 'block-start' | 'inline-start' | 'inline-end';
+    /**
+     * The metadata content.
+     */
+    metadata?: ReactNode;
+    /**
+     * Tooltip to display when the field has label.
+     */
+    tooltip?: ReactNode;
+}

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

@@ -1,2 +1,2 @@
 export { default as BaseField } from './base-field';
-export type { BaseFieldProps } from './base-field';
+export type { BaseFieldProps } from './base-field.types';

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

@@ -1,109 +1,10 @@
-import React, { ChangeEventHandler, FocusEventHandler, ForwardedRef, InputHTMLAttributes, ReactNode } from 'react';
+/// <reference types="react" />
+import type { BaseInputProps } from './base-input.types';
 import './base-input.scss';
-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.
-     */
-    className?: string;
-    /**
-     * Allow to remove `input` content with clear icon.
-     * When `multiline` is `true`, this prop is ignored.
-     */
-    clearable?: 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 `input` or `textarea`.
-     */
-    error?: boolean;
-    /**
-     * The `id` of the `input` or `textarea` element.
-     */
-    id?: string;
-    /**
-     * Attributes applied to the `input` or `textarea` element, check the link below for more details.
-     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes
-     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes
-     */
-    inputProps?: InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>;
-    /**
-     * The ref to the `input` or `textarea` element.
-     */
-    inputRef?: ForwardedRef<HTMLInputElement> | ForwardedRef<HTMLTextAreaElement>;
-    /**
-     * Icon or any element displayed at the end of the `input` or `textarea`.
-     */
-    leftElement?: ReactNode;
-    /**
-     * The maximum number of text lines to grow when `autoSize` and `multiline` are `true`.
-     */
-    maxRows?: number;
-    /**
-     * The number of visible text lines for the field.
-     * When `autoSize` is `false`, this prop behaves as `rows` for `textarea`.
-     * 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.
-     */
-    name?: string;
-    /**
-     * Callback fired when the `input` or `textarea` is blurred.
-     */
-    onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    /**
-     * Callback fired when the value is changed.
-     */
-    onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    /**
-     * Callback fired when the `input` or `textarea` value length is changed.
-     */
-    onCountChange?: (count: number) => void;
-    /**
-     * Callback fired when the `input` or `textarea` is focused.
-     */
-    onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    /**
-     * The short hint displayed in the `input` or `textarea` before the user enters a value.
-     */
-    placeholder?: string;
-    /**
-     * If `true`, the `input` or `textarea` will be read-only.
-     */
-    readOnly?: boolean;
-    /**
-     * If `true`, the `input` or `textarea` will be required.
-     */
-    required?: boolean;
-    /**
-     * Icon or any element displayed at the start of the `input` or `textarea`.
-     */
-    rightElement?: ReactNode;
-    /**
-     * The `value` of the `input` or `textarea` element, required for a controlled component.
-     */
-    value?: string;
-}
 /**
  * @internal
  * The base input component to enter and edit text.
  * Should be used only by other components and not exposed to the end users.
  */
-declare const BaseInput: React.ForwardRefExoticComponent<BaseInputProps & React.RefAttributes<HTMLDivElement>>;
+declare const BaseInput: import("react").ForwardRefExoticComponent<BaseInputProps & import("react").RefAttributes<HTMLDivElement>>;
 export default BaseInput;

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

@@ -0,0 +1,101 @@
+import { ChangeEventHandler, FocusEventHandler, ForwardedRef, InputHTMLAttributes, ReactNode } 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.
+     */
+    className?: string;
+    /**
+     * Allow to remove `input` content with clear icon.
+     * When `multiline` is `true`, this prop is ignored.
+     */
+    clearable?: 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 `input` or `textarea`.
+     */
+    error?: boolean;
+    /**
+     * The `id` of the `input` or `textarea` element.
+     */
+    id?: string;
+    /**
+     * Attributes applied to the `input` or `textarea` element, check the link below for more details.
+     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes
+     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes
+     */
+    inputProps?: InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>;
+    /**
+     * The ref to the `input` or `textarea` element.
+     */
+    inputRef?: ForwardedRef<HTMLInputElement> | ForwardedRef<HTMLTextAreaElement>;
+    /**
+     * Icon or any element displayed at the end of the `input` or `textarea`.
+     */
+    leftElement?: ReactNode;
+    /**
+     * The maximum number of text lines to grow when `autoSize` and `multiline` are `true`.
+     */
+    maxRows?: number;
+    /**
+     * The number of visible text lines for the field.
+     * When `autoSize` is `false`, this prop behaves as `rows` for `textarea`.
+     * 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.
+     */
+    name?: string;
+    /**
+     * Callback fired when the `input` or `textarea` is blurred.
+     */
+    onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /**
+     * Callback fired when the value is changed.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /**
+     * Callback fired when the `input` or `textarea` value length is changed.
+     */
+    onCountChange?: (count: number) => void;
+    /**
+     * Callback fired when the `input` or `textarea` is focused.
+     */
+    onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /**
+     * The short hint displayed in the `input` or `textarea` before the user enters a value.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the `input` or `textarea` will be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * If `true`, the `input` or `textarea` will be required.
+     */
+    required?: boolean;
+    /**
+     * Icon or any element displayed at the start of the `input` or `textarea`.
+     */
+    rightElement?: ReactNode;
+    /**
+     * The `value` of the `input` or `textarea` element, required for a controlled component.
+     */
+    value?: string;
+}

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

@@ -1,2 +1,2 @@
 export { default as BaseInput } from './base-input';
-export type { BaseInputProps } from './base-input';
+export type { BaseInputProps } from './base-input.types';

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { CheckboxProps } from './checkbox.types';
+import './checkbox.scss';
+/**
+ * Checkboxes are used to pick an option when one or more options can be chosen.
+ * A single checkbox can be used representing a singular option,
+ * for the purpose of toggling an element between an active and inactive state.
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { useState } from 'react';
+ * import { Checkbox } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyCustomComponent() {
+ *   const [checked, setChecked] = useState(true);
+ *
+ *   return <Checkbox {...args} checked onChange((event) => setChecked(event.target.checked)) />
+ * }
+ * ```
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export default Checkbox;

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

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/react';
+import { type Story } from './checkbox.stories';
+declare const meta: Meta;
+export default meta;
+export declare const SelectedUncontrolled: Story;
+export declare const SelectedControlled: Story;
+export declare const Unselected: Story;
+export declare const Indeterminate: Story;

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

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

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

@@ -0,0 +1,44 @@
+import React from 'react';
+export interface CheckboxProps {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * If `true`, the checkbox is checked.
+     */
+    checked?: boolean;
+    /**
+     * The state of the checkbox when it is initially rendered. Use when you do not need to control its state.
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * When `true`, prevents the user from interacting with the switch.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback fired when the state is changed.
+     */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * If `true`, the component is read only and prevent user to change value.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * If `true`, the `input` element is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * If `true`, the checkbox will be in indeterminate state.
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * The props applied to the input element.
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+}

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

@@ -0,0 +1,2 @@
+export { default as Checkbox } from './checkbox';
+export type { CheckboxProps } from './checkbox.types';

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { CheckboxFieldProps } from './checkbox-field.types';
+import './checkbox-field.scss';
+/**
+ * Checkbox fields are used to pick an option when one or more options can be chosen.
+ * A single checkbox field can be used representing a singular option,
+ * for the purpose of toggling an element between an active and inactive state.
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { useState } from 'react';
+ * import { CheckboxField } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyCustomComponent() {
+ *   const [checked, setChecked] = useState(true);
+ *
+ *   return <CheckboxField checked={checked} onChange((event) => setChecked(event.target.checked)) />
+ * }
+ * ```
+ */
+declare const CheckboxField: import("react").ForwardRefExoticComponent<CheckboxFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export default CheckboxField;

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

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/react';
+import { type Story } from './checkbox-field.stories';
+declare const meta: Meta;
+export default meta;
+export declare const WithLabelAndTooltip: Story;
+export declare const Uncontrolled: Story;
+export declare const Controlled: Story;

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

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import CheckboxField from './checkbox-field';
+declare const meta: Meta<typeof CheckboxField>;
+export default meta;
+export type Story = StoryObj<typeof CheckboxField>;
+export declare const Basic: Story;
+export declare const WithLabelAndTooltip: Story;
+export declare const Controlled: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Indeterminate: Story;

package/dist/components/inputs/checkbox-field/checkbox-field.types.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import type { CheckboxProps } from '../checkbox';
+export interface CheckboxFieldProps extends CheckboxProps {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The label content.
+     */
+    label?: ReactNode;
+    /**
+     * Tooltip to display when the field has label.
+     */
+    tooltip?: ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { default as CheckboxField } from './checkbox-field';
+export type { CheckboxFieldProps } from './checkbox-field.types';

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

@@ -1,24 +1,6 @@
-import { ReactNode } from 'react';
+/// <reference types="react" />
+import type { FieldLabelProps } from './field-label.types';
 import './field-label.scss';
-export interface FieldLabelProps {
-    /**
-     * Custom class name for the container of the component.
-     */
-    className?: string;
-    /**
-     * The content of the component.
-     */
-    children: ReactNode;
-    /**
-     * The `id` of the element the label is associated with.
-     */
-    htmlFor?: string;
-    /**
-     * The size of the label.
-     * @default 'bold'
-     */
-    view?: 'normal' | 'bold';
-}
 /**
  * @internal
  * The `FieldLabel` component renders a label for a form field like `input`, `select`, `textarea`, etc.

package/dist/components/inputs/field-label/field-label.types.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export interface FieldLabelProps {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The content of the component.
+     */
+    children: ReactNode;
+    /**
+     * The `id` of the element the label is associated with.
+     */
+    htmlFor?: string;
+    /**
+     * The size of the label.
+     * @default 'bold'
+     */
+    view?: 'normal' | 'bold';
+}

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

@@ -1,2 +1,2 @@
 export { default as FieldLabel } from './field-label';
-export type { FieldLabelProps } from './field-label';
+export type { FieldLabelProps } from './field-label.types';

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

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

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

@@ -1,2 +1,2 @@
 export { default as InputField } from './input-field';
-export type { InputFieldProps } from './input-field';
+export type { InputFieldProps } from './input-field.types';

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

@@ -1,91 +1,5 @@
-import { ReactNode } from 'react';
-export interface InputFieldProps {
-    /**
-     * Custom class name for the container of this component.
-     */
-    className?: string;
-    /**
-     * Allow to remove `input` content with clear icon.
-     */
-    clearable?: 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 `input`.
-     */
-    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 `input` element.
-     */
-    id?: string;
-    /**
-     * Attributes applied to the `input` element, check the link below for more details.
-     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes
-     */
-    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-    /**
-     * The label content.
-     */
-    label?: ReactNode;
-    /**
-     * Icon or any element displayed at the end of the `input`.
-     */
-    leftElement?: React.ReactNode;
-    /**
-     * The `name` attribute of the `input` element.
-     */
-    name?: string;
-    /**
-     * Callback fired when the `input` is blurred.
-     */
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
-    /**
-     * Callback fired when the value is changed.
-     */
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    /**
-     * Callback fired when the `input` is focused.
-     */
-    onFocus?: React.FocusEventHandler<HTMLInputElement>;
-    /**
-     * The short hint displayed in the `input` before the user enters a value.
-     */
-    placeholder?: string;
-    /**
-     * If `true`, the `input` element will be read-only.
-     */
-    readOnly?: boolean;
-    /**
-     * If `true`, the `input` element will be required.
-     */
-    required?: boolean;
-    /**
-     * Icon or any element displayed at the start of the `input`.
-     */
-    rightElement?: React.ReactNode;
-    /**
-     * Tooltip to display when the field has label.
-     */
-    tooltip?: ReactNode;
-    /**
-     * The `value` of the `input` element, required for a controlled component.
-     */
-    value?: string;
-}
+/// <reference types="react" />
+import type { InputFieldProps } from './input-field.types';
 /**
  * The input field includes a label, a helper text and an input field where users can type one line of text.
  * The input field component typically appears in forms and dialogs.

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

@@ -0,0 +1,88 @@
+import { ReactNode } from 'react';
+export interface InputFieldProps {
+    /**
+     * Custom class name for the container of this component.
+     */
+    className?: string;
+    /**
+     * Allow to remove `input` content with clear icon.
+     */
+    clearable?: 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 `input`.
+     */
+    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 `input` element.
+     */
+    id?: string;
+    /**
+     * Attributes applied to the `input` element, check the link below for more details.
+     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * The label content.
+     */
+    label?: ReactNode;
+    /**
+     * Icon or any element displayed at the end of the `input`.
+     */
+    leftElement?: React.ReactNode;
+    /**
+     * The `name` attribute of the `input` element.
+     */
+    name?: string;
+    /**
+     * Callback fired when the `input` is blurred.
+     */
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * Callback fired when the value is changed.
+     */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Callback fired when the `input` is focused.
+     */
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * The short hint displayed in the `input` before the user enters a value.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the `input` element will be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * If `true`, the `input` element will be required.
+     */
+    required?: boolean;
+    /**
+     * Icon or any element displayed at the start of the `input`.
+     */
+    rightElement?: React.ReactNode;
+    /**
+     * Tooltip to display when the field has label.
+     */
+    tooltip?: ReactNode;
+    /**
+     * The `value` of the `input` element, required for a controlled component.
+     */
+    value?: string;
+}

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

@@ -3,3 +3,4 @@ export * from './base-input';
 export * from './field-label';
 export * from './select';
 export * from './toggle';
+export * from './checkbox';