@bloomreach/react-banana-ui 1.30.0 → 1.31.0

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

@@ -5,5 +5,7 @@ export default meta;
 export type Story = StoryObj<typeof InputTag>;
 export declare const Basic: Story;
 export declare const Controlled: Story;
+export declare const ReadOnly: Story;
+export declare const Disabled: Story;
 export declare const AllStates: Story;
 export declare const AllStatesWithIcon: Story;

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

@@ -11,6 +11,10 @@ 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 Disabled: Story;
+export declare const DisabledMultiple: Story<(typeof fruits)[0], true>;
+export declare const ReadOnly: Story;
+export declare const ReadOnlyMultiple: Story<(typeof fruits)[0], true>;
 export declare const HideSelectedOptions: Story<string, true>;
 export declare const GroupedOptions: Story<{
     firstLetter: string;

package/dist/components/inputs/calendar/use-calendar-state.d.ts

@@ -1,3 +1,3 @@
 import { CalendarState } from '@react-stately/calendar';
 import { CalendarProps } from './calendar.types';
-export declare function useCalendarState(props: CalendarProps): CalendarState;
+export declare const useCalendarState: (props: CalendarProps) => CalendarState;

package/dist/components/inputs/calendar/use-calendar.d.ts

@@ -1,7 +1,7 @@
 import { CalendarState } from '@react-stately/calendar';
 import { DOMAttributes } from 'react';
 import { ButtonProps } from '../../buttons';
-export declare function useCalendar(state: CalendarState): {
+export declare const useCalendar: (state: CalendarState) => {
     calendarProps: DOMAttributes<HTMLElement>;
     nextButtonProps: ButtonProps;
     prevButtonProps: ButtonProps;

package/dist/components/inputs/calendar-cell/calendar-cell.types.d.ts

@@ -1,5 +1,5 @@
 import { CalendarDate } from '@internationalized/date';
-import { CalendarState } from '@react-stately/calendar';
+import { CalendarState, RangeCalendarState } from '@react-stately/calendar';
 export interface CalendarCellProps {
     /**
      * Custom class name for the container of the component.
@@ -10,7 +10,11 @@ export interface CalendarCellProps {
      */
     date: CalendarDate;
     /**
-     * The state of the calendar. Use `useCalendarState` to get it.
+     * The state of the calendar. Use `useCalendarState` or `useRangeCalendarState` to get it.
      */
-    state: CalendarState;
+    state: CalendarState | RangeCalendarState;
+    /**
+     * The current month of the calendar.
+     */
+    currentMonth?: CalendarDate;
 }

package/dist/components/inputs/calendar-grid/calendar-grid.types.d.ts

@@ -1,11 +1,15 @@
-import { CalendarState } from '@react-stately/calendar';
+import { CalendarState, RangeCalendarState } from '@react-stately/calendar';
 export interface CalendarGridProps {
     /**
      * Custom class name for the container of the component.
      */
     className?: string;
     /**
-     * The state for the calendar from `useCalendarState` hook.
+     * The state for the calendar from `useCalendarState` or `useRangeCalendarState` hook.
      */
-    state: CalendarState;
+    state: CalendarState | RangeCalendarState;
+    /**
+     * The months offset for the calendar.
+     */
+    offset?: number;
 }

package/dist/components/inputs/date-picker/date-picker.stories.d.ts

@@ -10,3 +10,5 @@ export declare const MinDate: Story;
 export declare const MaxDate: Story;
 export declare const SetError: Story;
 export declare const AsFormField: Story;
+export declare const Readonly: Story;
+export declare const Disabled: Story;

package/dist/components/inputs/date-picker/use-date-picker-state.d.ts

@@ -3,4 +3,4 @@ import { DatePickerProps } from './date-picker.types';
 /**
  * Custom hook that manages the state for a date picker component.
  */
-export declare function useDatePickerState(props: DatePickerProps): DatePickerState;
+export declare const useDatePickerState: (props: DatePickerProps) => DatePickerState;

package/dist/components/inputs/date-picker/use-date-picker.d.ts

@@ -5,7 +5,7 @@ import { DatePickerProps } from './date-picker.types';
 /**
  * Custom hook for the DatePicker component.
  */
-export declare function useDatePicker(props: DatePickerProps, state: DatePickerState): {
+export declare const useDatePicker: (props: DatePickerProps, state: DatePickerState) => {
     calendarState: CalendarState;
     dateInputProps: DateInputProps;
     lockFocus: boolean;

package/dist/components/inputs/date-range-picker/date-range-picker.d.ts

@@ -0,0 +1,24 @@
+import { DateRangePickerProps } from './date-range-picker.types';
+/**
+ * The `DateRangePicker` component is a composite component that provides a way to select a range of dates.
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { DateRangePicker } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyCustomComponent() {
+ *   return <DateRangePicker
+ *       placeholderValue={new Date('2999-12-31')}
+ *       defaultValue={new Date('2999-12-30')}
+ *       minDate={new Date('2999-12-01')}
+ *       onChange={(value, context) => {
+ *         console.log('Changed value', value); // => `Date` object
+ *         console.log('Context', context); // => Validation information use it if you want to show validation message
+ *       }}
+ *     />;
+ * }
+ * ```
+ */
+declare const DateRangePicker: import('react').ForwardRefExoticComponent<DateRangePickerProps & import('react').RefAttributes<HTMLDivElement>>;
+export default DateRangePicker;

package/dist/components/inputs/date-range-picker/date-range-picker.qa.stories.d.ts

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

package/dist/components/inputs/date-range-picker/date-range-picker.stories.d.ts

@@ -0,0 +1,10 @@
+import { default as DateRangePicker } from './date-range-picker';
+import { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof DateRangePicker>;
+export default meta;
+export type Story = StoryObj<typeof DateRangePicker>;
+export declare const Basic: Story;
+export declare const WithValue: Story;
+export declare const Controlled: Story;
+export declare const Readonly: Story;
+export declare const Disabled: Story;

package/dist/components/inputs/date-range-picker/date-range-picker.types.d.ts

@@ -0,0 +1,46 @@
+import { DateRangeValue } from '../../../utils/types/date.types';
+interface DateRangeChangeHandlerContext {
+}
+export interface DateRangePickerProps {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The default value of the date range picker.
+     */
+    defaultValue?: DateRangeValue;
+    /**
+     * Whether the date range picker is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The maximum date that can be selected.
+     */
+    maxDate?: Date;
+    /**
+     * The minimum date that can be selected.
+     */
+    minDate?: Date;
+    /**
+     * The callback function that is called when the value of the date range picker changes.
+     */
+    onChange?: (value: DateRangeValue | null, context: DateRangeChangeHandlerContext) => void;
+    /**
+     * The placeholder value of the date range picker.
+     */
+    placeholderValue?: Date;
+    /**
+     * Whether the date range picker is read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the date range picker is required.
+     */
+    required?: boolean;
+    /**
+     * The value of the date range
+     */
+    value?: DateRangeValue;
+}
+export {};

package/dist/components/inputs/date-range-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DateRangePicker } from './date-range-picker';
+export type { DateRangePickerProps } from './date-range-picker.types';

package/dist/components/inputs/date-range-picker/use-date-range-picker-state.d.ts

@@ -0,0 +1,3 @@
+import { DateRangePickerState } from '@react-stately/datepicker';
+import { DateRangePickerProps } from './date-range-picker.types';
+export declare function useDateRangeInputState(props: DateRangePickerProps): DateRangePickerState;

package/dist/components/inputs/date-range-picker/use-date-range-picker.d.ts

@@ -0,0 +1,19 @@
+import { useRangeCalendarState } from '../range-calendar/use-range-calendar-state';
+import { DateRangePickerAria } from '@react-aria/datepicker';
+import { DateFieldState, DateRangePickerState } from '@react-stately/datepicker';
+import { InputHTMLAttributes, RefObject } from 'react';
+import { PopupProps } from '../../popovers';
+import { RangeCalendarProps } from '../range-calendar/range-calendar.types';
+import { DateRangePickerProps } from './date-range-picker.types';
+export declare const useDateRangePicker: (props: DateRangePickerProps, state: DateRangePickerState, ref: RefObject<Element>) => {
+    calendarProps: RangeCalendarProps;
+    calendarState: ReturnType<typeof useRangeCalendarState>;
+    dialogProps: DateRangePickerAria["dialogProps"];
+    groupProps: DateRangePickerAria["groupProps"];
+    hiddenInputEndProps: InputHTMLAttributes<HTMLInputElement>;
+    hiddenInputStartProps: InputHTMLAttributes<HTMLInputElement>;
+    lockFocus: boolean;
+    popupProps: PopupProps;
+    stateEnd: DateFieldState;
+    stateStart: DateFieldState;
+};

package/dist/components/inputs/date-segments/date-segments.d.ts

@@ -0,0 +1,8 @@
+import { DateSegmentsProps, DateSegmentsRef } from './date-segments.types';
+/**
+ * The `DateSegments` component is used to render the segments of a date input.
+ *
+ * @internal
+ */
+declare const DateSegments: import('react').ForwardRefExoticComponent<DateSegmentsProps & import('react').RefAttributes<DateSegmentsRef>>;
+export default DateSegments;

package/dist/components/inputs/date-segments/date-segments.types.d.ts

@@ -0,0 +1,7 @@
+import { DateFieldState } from '@react-stately/datepicker';
+export interface DateSegmentsProps {
+    state: DateFieldState;
+}
+export interface DateSegmentsRef {
+    focusFirstSegment: () => void;
+}

package/dist/components/inputs/date-segments/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DateSegments } from './date-segments';
+export type { DateSegmentsProps } from './date-segments.types';

package/dist/components/inputs/range-calendar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RangeCalendar } from './range-calendar';
+export type { RangeCalendarProps } from './range-calendar.types';

package/dist/components/inputs/range-calendar/range-calendar-base.d.ts

@@ -0,0 +1,7 @@
+import { RangeCalendarBaseProps } from './range-calendar.types';
+/**
+ * @internal
+ * The component is used inside range datepicker component to allow lift state up.
+ */
+declare const RangeCalendarBase: import('react').ForwardRefExoticComponent<RangeCalendarBaseProps & import('react').RefAttributes<HTMLDivElement>>;
+export default RangeCalendarBase;

package/dist/components/inputs/range-calendar/range-calendar.d.ts

@@ -0,0 +1,16 @@
+import { RangeCalendarProps } from './range-calendar.types';
+/**
+ * The component description.
+ *
+ * ### Usage
+ *
+ * ```tsx
+ * import { RangeCalendar } from '@bloomreach/react-banana-ui';
+ *
+ * export default function MyCustomComponent() {
+ *   return <RangeCalendar>Write an example of component usage</RangeCalendar>;
+ * }
+ * ```
+ */
+declare const RangeCalendar: import('react').ForwardRefExoticComponent<RangeCalendarProps & import('react').RefAttributes<HTMLDivElement>>;
+export default RangeCalendar;

package/dist/components/inputs/range-calendar/range-calendar.types.d.ts

@@ -0,0 +1,27 @@
+import { RangeCalendarState } from '@react-stately/calendar';
+import { DateRangeValue } from '../../../utils/types/date.types';
+import { CalendarProps } from '../calendar/calendar.types';
+import { useRangeCalendarState } from './use-range-calendar-state';
+export interface RangeCalendarBaseProps {
+    className?: string;
+    state: RangeCalendarState;
+}
+export interface RangeCalendarProps extends Omit<CalendarProps, 'defaultValue' | 'onChange' | 'value'> {
+    /**
+     * Custom class name for the container of the component.
+     */
+    className?: string;
+    /**
+     * The dates that are selected when the range calendar first mounts (uncontrolled).
+     */
+    defaultValue?: DateRangeValue;
+    /**
+     * Handler that is called when the selected dates change.
+     */
+    onChange?: (value: DateRangeValue | null) => void;
+    state?: ReturnType<typeof useRangeCalendarState>;
+    /**
+     * The selected dates (controlled).
+     */
+    value?: DateRangeValue | null;
+}

package/dist/components/inputs/range-calendar/use-range-calendar-state.d.ts

@@ -0,0 +1,3 @@
+import { RangeCalendarState } from '@react-stately/calendar';
+import { RangeCalendarProps } from './range-calendar.types';
+export declare function useRangeCalendarState(props: RangeCalendarProps): RangeCalendarState;

package/dist/components/inputs/range-calendar/use-range-calendar.d.ts

@@ -0,0 +1,10 @@
+import { RangeCalendarState } from '@react-stately/calendar';
+import { DOMAttributes, RefObject } from 'react';
+import { ButtonProps } from '../../buttons';
+export declare const useRangeCalendar: (state: RangeCalendarState, ref: RefObject<Element>) => {
+    calendarProps: DOMAttributes<HTMLElement>;
+    leftTitle: string;
+    nextButtonProps: ButtonProps;
+    prevButtonProps: ButtonProps;
+    rightTitle: string;
+};

package/dist/components/popovers/popup/popup-content/popup-content.types.d.ts

@@ -14,6 +14,10 @@ export interface PopupContentProps {
      * Custom class name for the container of the component.
      */
     className?: string;
+    /**
+     * The initial focus index of the popup.
+     */
+    initialFocus?: number;
     /**
      * If `true`, the popup will always be mounted in the DOM.
      * @default false