@skyscanner/backpack-web 29.4.0 → 29.4.2

package/bpk-component-calendar/src/BpkCalendarContainer.d.ts

@@ -18,7 +18,11 @@
 
 import type { ComponentType } from 'react';
 import type { SelectionConfiguration } from './custom-proptypes';
-type Props = {
+export type Props = {
+    /**
+     * If set to true (default), it sets a fixed width on the calendar container. This is necessary to support transitions and to create the right size for the Datepicker component.
+     * If set to false, the calendar is of fluid width and will take up the space of its parent container.
+     */
     fixedWidth?: boolean;
     maxDate?: Date;
     minDate?: Date;
@@ -27,7 +31,13 @@ type Props = {
         month: Date;
         source: string;
     }) => void) | null;
+    /**
+     * An object to indicate which configuration of the calendar is being used. Choices are `single` date selection or `range` date selection.
+     */
     selectionConfiguration?: SelectionConfiguration;
+    /**
+     * Sets the date that is focused initially, this prop has no effect if `selectionConfiguration` is specified in which case the date specified in this prop is focused. If no selected date is set and `initiallyFocusedDate` is not set the focused date is the `minDate`(defaults to today if it has not been explicitly set).
+     */
     initiallyFocusedDate?: Date | null;
     markToday?: boolean;
     markOutsideDays?: boolean;
@@ -99,72 +109,8 @@ declare const withCalendarState: <P extends object>(Calendar: ComponentType<P>)
     contextType?: import("react").Context<any> | undefined;
 };
 declare const _default: {
-    new (props: CalendarProps<{
-        changeMonthLabel?: string | null | undefined;
-        daysOfWeek: import("./custom-proptypes").DaysOfWeek;
-        formatDateFull: (date: Date) => string | Date;
-        formatMonth: (date: Date) => string | Date;
-        id: string;
-        maxDate: Date;
-        minDate: Date;
-        month: Date;
-        nextMonthLabel?: string | null | undefined;
-        previousMonthLabel?: string | null | undefined;
-        weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-        className?: string | null | undefined;
-        dateModifiers?: import("./custom-proptypes").DateModifiers | undefined;
-        fixedWidth?: boolean | undefined;
-        focusedDate?: Date | null | undefined;
-        markOutsideDays?: boolean | undefined;
-        markToday?: boolean | undefined;
-        onMonthChange?: ((event: UIEvent, { month, source }: {
-            month: Date;
-            source: string;
-        }) => void) | null | undefined;
-        onDateClick?: ((date: Date) => void) | null | undefined;
-        onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
-        preventKeyboardFocus?: boolean | undefined;
-        selectionConfiguration?: SelectionConfiguration | undefined;
-        gridClassName?: string | null | undefined;
-        weekDayKey?: string | undefined;
-        navProps?: {} | null | undefined;
-        headerProps?: {} | null | undefined;
-        gridProps?: {} | null | undefined;
-        dateProps?: {} | null | undefined;
-    }>): {
-        UNSAFE_componentWillReceiveProps(nextProps: CalendarProps<{
-            changeMonthLabel?: string | null | undefined;
-            daysOfWeek: import("./custom-proptypes").DaysOfWeek;
-            formatDateFull: (date: Date) => string | Date;
-            formatMonth: (date: Date) => string | Date;
-            id: string;
-            maxDate: Date;
-            minDate: Date;
-            month: Date;
-            nextMonthLabel?: string | null | undefined;
-            previousMonthLabel?: string | null | undefined;
-            weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-            className?: string | null | undefined;
-            dateModifiers?: import("./custom-proptypes").DateModifiers | undefined;
-            fixedWidth?: boolean | undefined;
-            focusedDate?: Date | null | undefined;
-            markOutsideDays?: boolean | undefined;
-            markToday?: boolean | undefined;
-            onMonthChange?: ((event: UIEvent, { month, source }: {
-                month: Date;
-                source: string;
-            }) => void) | null | undefined;
-            onDateClick?: ((date: Date) => void) | null | undefined;
-            onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
-            preventKeyboardFocus?: boolean | undefined;
-            selectionConfiguration?: SelectionConfiguration | undefined;
-            gridClassName?: string | null | undefined;
-            weekDayKey?: string | undefined;
-            navProps?: {} | null | undefined;
-            headerProps?: {} | null | undefined;
-            gridProps?: {} | null | undefined;
-            dateProps?: {} | null | undefined;
-        }>): void;
+    new (props: CalendarProps<import("./composeCalendar").Props>): {
+        UNSAFE_componentWillReceiveProps(nextProps: CalendarProps<import("./composeCalendar").Props>): void;
         handleDateFocus: (event: UIEvent, { date, source }: {
             date: Date;
             source: string;
@@ -177,73 +123,9 @@ declare const _default: {
         handleDateKeyDown: (event: KeyboardEvent) => void;
         render(): JSX.Element;
         context: any;
-        setState<K extends keyof State>(state: State | ((prevState: Readonly<State>, props: Readonly<CalendarProps<{
-            changeMonthLabel?: string | null | undefined;
-            daysOfWeek: import("./custom-proptypes").DaysOfWeek;
-            formatDateFull: (date: Date) => string | Date;
-            formatMonth: (date: Date) => string | Date;
-            id: string;
-            maxDate: Date;
-            minDate: Date;
-            month: Date;
-            nextMonthLabel?: string | null | undefined;
-            previousMonthLabel?: string | null | undefined;
-            weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-            className?: string | null | undefined;
-            dateModifiers?: import("./custom-proptypes").DateModifiers | undefined;
-            fixedWidth?: boolean | undefined;
-            focusedDate?: Date | null | undefined;
-            markOutsideDays?: boolean | undefined;
-            markToday?: boolean | undefined;
-            onMonthChange?: ((event: UIEvent, { month, source }: {
-                month: Date;
-                source: string;
-            }) => void) | null | undefined;
-            onDateClick?: ((date: Date) => void) | null | undefined;
-            onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
-            preventKeyboardFocus?: boolean | undefined;
-            selectionConfiguration?: SelectionConfiguration | undefined;
-            gridClassName?: string | null | undefined;
-            weekDayKey?: string | undefined;
-            navProps?: {} | null | undefined;
-            headerProps?: {} | null | undefined;
-            gridProps?: {} | null | undefined;
-            dateProps?: {} | null | undefined;
-        }>>) => State | Pick<State, K> | null) | Pick<State, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends keyof State>(state: State | ((prevState: Readonly<State>, props: Readonly<CalendarProps<import("./composeCalendar").Props>>) => State | Pick<State, K> | null) | Pick<State, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<CalendarProps<{
-            changeMonthLabel?: string | null | undefined;
-            daysOfWeek: import("./custom-proptypes").DaysOfWeek;
-            formatDateFull: (date: Date) => string | Date;
-            formatMonth: (date: Date) => string | Date;
-            id: string;
-            maxDate: Date;
-            minDate: Date;
-            month: Date;
-            nextMonthLabel?: string | null | undefined;
-            previousMonthLabel?: string | null | undefined;
-            weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-            className?: string | null | undefined;
-            dateModifiers?: import("./custom-proptypes").DateModifiers | undefined;
-            fixedWidth?: boolean | undefined;
-            focusedDate?: Date | null | undefined;
-            markOutsideDays?: boolean | undefined;
-            markToday?: boolean | undefined;
-            onMonthChange?: ((event: UIEvent, { month, source }: {
-                month: Date;
-                source: string;
-            }) => void) | null | undefined;
-            onDateClick?: ((date: Date) => void) | null | undefined;
-            onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
-            preventKeyboardFocus?: boolean | undefined;
-            selectionConfiguration?: SelectionConfiguration | undefined;
-            gridClassName?: string | null | undefined;
-            weekDayKey?: string | undefined;
-            navProps?: {} | null | undefined;
-            headerProps?: {} | null | undefined;
-            gridProps?: {} | null | undefined;
-            dateProps?: {} | null | undefined;
-        }>> & Readonly<{
+        readonly props: Readonly<CalendarProps<import("./composeCalendar").Props>> & Readonly<{
             children?: import("react").ReactNode;
         }>;
         state: Readonly<State>;
@@ -251,208 +133,16 @@ declare const _default: {
             [key: string]: import("react").ReactInstance;
         };
         componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<CalendarProps<{
-            changeMonthLabel?: string | null | undefined;
-            daysOfWeek: import("./custom-proptypes").DaysOfWeek;
-            formatDateFull: (date: Date) => string | Date;
-            formatMonth: (date: Date) => string | Date;
-            id: string;
-            maxDate: Date;
-            minDate: Date;
-            month: Date;
-            nextMonthLabel?: string | null | undefined;
-            previousMonthLabel?: string | null | undefined;
-            weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-            className?: string | null | undefined;
-            dateModifiers?: import("./custom-proptypes").DateModifiers | undefined;
-            fixedWidth?: boolean | undefined;
-            focusedDate?: Date | null | undefined;
-            markOutsideDays?: boolean | undefined;
-            markToday?: boolean | undefined;
-            onMonthChange?: ((event: UIEvent, { month, source }: {
-                month: Date;
-                source: string;
-            }) => void) | null | undefined;
-            onDateClick?: ((date: Date) => void) | null | undefined;
-            onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
-            preventKeyboardFocus?: boolean | undefined;
-            selectionConfiguration?: SelectionConfiguration | undefined;
-            gridClassName?: string | null | undefined;
-            weekDayKey?: string | undefined;
-            navProps?: {} | null | undefined;
-            headerProps?: {} | null | undefined;
-            gridProps?: {} | null | undefined;
-            dateProps?: {} | null | undefined;
-        }>>, nextState: Readonly<State>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<CalendarProps<import("./composeCalendar").Props>>, nextState: Readonly<State>, nextContext: any): boolean;
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<CalendarProps<{
-            changeMonthLabel?: string | null | undefined;
-            daysOfWeek: import("./custom-proptypes").DaysOfWeek;
-            formatDateFull: (date: Date) => string | Date;
-            formatMonth: (date: Date) => string | Date;
-            id: string;
-            maxDate: Date;
-            minDate: Date;
-            month: Date;
-            nextMonthLabel?: string | null | undefined;
-            previousMonthLabel?: string | null | undefined;
-            weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-            className?: string | null | undefined;
-            dateModifiers?: import("./custom-proptypes").DateModifiers | undefined;
-            fixedWidth?: boolean | undefined;
-            focusedDate?: Date | null | undefined;
-            markOutsideDays?: boolean | undefined;
-            markToday?: boolean | undefined;
-            onMonthChange?: ((event: UIEvent, { month, source }: {
-                month: Date;
-                source: string;
-            }) => void) | null | undefined;
-            onDateClick?: ((date: Date) => void) | null | undefined;
-            onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
-            preventKeyboardFocus?: boolean | undefined;
-            selectionConfiguration?: SelectionConfiguration | undefined;
-            gridClassName?: string | null | undefined;
-            weekDayKey?: string | undefined;
-            navProps?: {} | null | undefined;
-            headerProps?: {} | null | undefined;
-            gridProps?: {} | null | undefined;
-            dateProps?: {} | null | undefined;
-        }>>, prevState: Readonly<State>): any;
-        componentDidUpdate?(prevProps: Readonly<CalendarProps<{
-            changeMonthLabel?: string | null | undefined;
-            daysOfWeek: import("./custom-proptypes").DaysOfWeek;
-            formatDateFull: (date: Date) => string | Date;
-            formatMonth: (date: Date) => string | Date;
-            id: string;
-            maxDate: Date;
-            minDate: Date;
-            month: Date;
-            nextMonthLabel?: string | null | undefined;
-            previousMonthLabel?: string | null | undefined;
-            weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-            className?: string | null | undefined;
-            dateModifiers?: import("./custom-proptypes").DateModifiers | undefined;
-            fixedWidth?: boolean | undefined;
-            focusedDate?: Date | null | undefined;
-            markOutsideDays?: boolean | undefined;
-            markToday?: boolean | undefined;
-            onMonthChange?: ((event: UIEvent, { month, source }: {
-                month: Date;
-                source: string;
-            }) => void) | null | undefined;
-            onDateClick?: ((date: Date) => void) | null | undefined;
-            onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
-            preventKeyboardFocus?: boolean | undefined;
-            selectionConfiguration?: SelectionConfiguration | undefined;
-            gridClassName?: string | null | undefined;
-            weekDayKey?: string | undefined;
-            navProps?: {} | null | undefined;
-            headerProps?: {} | null | undefined;
-            gridProps?: {} | null | undefined;
-            dateProps?: {} | null | undefined;
-        }>>, prevState: Readonly<State>, snapshot?: any): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<CalendarProps<import("./composeCalendar").Props>>, prevState: Readonly<State>): any;
+        componentDidUpdate?(prevProps: Readonly<CalendarProps<import("./composeCalendar").Props>>, prevState: Readonly<State>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<CalendarProps<{
-            changeMonthLabel?: string | null | undefined;
-            daysOfWeek: import("./custom-proptypes").DaysOfWeek;
-            formatDateFull: (date: Date) => string | Date;
-            formatMonth: (date: Date) => string | Date;
-            id: string;
-            maxDate: Date;
-            minDate: Date;
-            month: Date;
-            nextMonthLabel?: string | null | undefined;
-            previousMonthLabel?: string | null | undefined;
-            weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-            className?: string | null | undefined;
-            dateModifiers?: import("./custom-proptypes").DateModifiers | undefined;
-            fixedWidth?: boolean | undefined;
-            focusedDate?: Date | null | undefined;
-            markOutsideDays?: boolean | undefined;
-            markToday?: boolean | undefined;
-            onMonthChange?: ((event: UIEvent, { month, source }: {
-                month: Date;
-                source: string;
-            }) => void) | null | undefined;
-            onDateClick?: ((date: Date) => void) | null | undefined;
-            onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
-            preventKeyboardFocus?: boolean | undefined;
-            selectionConfiguration?: SelectionConfiguration | undefined;
-            gridClassName?: string | null | undefined;
-            weekDayKey?: string | undefined;
-            navProps?: {} | null | undefined;
-            headerProps?: {} | null | undefined;
-            gridProps?: {} | null | undefined;
-            dateProps?: {} | null | undefined;
-        }>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<CalendarProps<{
-            changeMonthLabel?: string | null | undefined;
-            daysOfWeek: import("./custom-proptypes").DaysOfWeek;
-            formatDateFull: (date: Date) => string | Date;
-            formatMonth: (date: Date) => string | Date;
-            id: string;
-            maxDate: Date;
-            minDate: Date;
-            month: Date;
-            nextMonthLabel?: string | null | undefined;
-            previousMonthLabel?: string | null | undefined;
-            weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-            className?: string | null | undefined;
-            dateModifiers?: import("./custom-proptypes").DateModifiers | undefined;
-            fixedWidth?: boolean | undefined;
-            focusedDate?: Date | null | undefined;
-            markOutsideDays?: boolean | undefined;
-            markToday?: boolean | undefined;
-            onMonthChange?: ((event: UIEvent, { month, source }: {
-                month: Date;
-                source: string;
-            }) => void) | null | undefined;
-            onDateClick?: ((date: Date) => void) | null | undefined;
-            onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
-            preventKeyboardFocus?: boolean | undefined;
-            selectionConfiguration?: SelectionConfiguration | undefined;
-            gridClassName?: string | null | undefined;
-            weekDayKey?: string | undefined;
-            navProps?: {} | null | undefined;
-            headerProps?: {} | null | undefined;
-            gridProps?: {} | null | undefined;
-            dateProps?: {} | null | undefined;
-        }>>, nextState: Readonly<State>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<CalendarProps<{
-            changeMonthLabel?: string | null | undefined;
-            daysOfWeek: import("./custom-proptypes").DaysOfWeek;
-            formatDateFull: (date: Date) => string | Date;
-            formatMonth: (date: Date) => string | Date;
-            id: string;
-            maxDate: Date;
-            minDate: Date;
-            month: Date;
-            nextMonthLabel?: string | null | undefined;
-            previousMonthLabel?: string | null | undefined;
-            weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-            className?: string | null | undefined;
-            dateModifiers?: import("./custom-proptypes").DateModifiers | undefined;
-            fixedWidth?: boolean | undefined;
-            focusedDate?: Date | null | undefined;
-            markOutsideDays?: boolean | undefined;
-            markToday?: boolean | undefined;
-            onMonthChange?: ((event: UIEvent, { month, source }: {
-                month: Date;
-                source: string;
-            }) => void) | null | undefined;
-            onDateClick?: ((date: Date) => void) | null | undefined;
-            onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
-            preventKeyboardFocus?: boolean | undefined;
-            selectionConfiguration?: SelectionConfiguration | undefined;
-            gridClassName?: string | null | undefined;
-            weekDayKey?: string | undefined;
-            navProps?: {} | null | undefined;
-            headerProps?: {} | null | undefined;
-            gridProps?: {} | null | undefined;
-            dateProps?: {} | null | undefined;
-        }>>, nextState: Readonly<State>, nextContext: any): void;
+        componentWillReceiveProps?(nextProps: Readonly<CalendarProps<import("./composeCalendar").Props>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<CalendarProps<import("./composeCalendar").Props>>, nextState: Readonly<State>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<CalendarProps<import("./composeCalendar").Props>>, nextState: Readonly<State>, nextContext: any): void;
     };
     defaultProps: {
         fixedWidth: boolean;

package/bpk-component-calendar/src/BpkCalendarDate.d.ts

@@ -33,7 +33,7 @@ export declare const ROW_TYPES: {
     readonly end: "end";
     readonly both: "both";
 };
-export type SelectionTypes = typeof SELECTION_TYPES[keyof typeof SELECTION_TYPES];
+export type SelectionTypes = (typeof SELECTION_TYPES)[keyof typeof SELECTION_TYPES];
 export type Props = DefaultProps & {
     date: Date;
 };
@@ -49,6 +49,13 @@ type DefaultProps = {
     onClick?: ((date: Date) => void) | null;
     onDateKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void;
     preventKeyboardFocus?: boolean;
+    /**
+     * This property determines which selected styles will be applied to the date cell. If using ranges use `start`, `middle` and `end` to apply the correct range styles.
+     *   - `SELECTION_TYPES.single` - When the date is selected individually i.e. Not as part of a range
+     *   - `SELECTION_TYPES.start` - When a start date is selected in a range calendar i.e. First date in the range
+     *   - `SELECTION_TYPES.middle` - When a date is in a range between start and end date i.e. Date in the middle of two dates
+     *   - `SELECTION_TYPES.end` - When an end date is selected in a range calendar i.e. Last date in the range
+     */
     selectionType?: SelectionTypes;
     style?: {};
 };

package/bpk-component-calendar/src/BpkCalendarGrid.d.ts

@@ -32,14 +32,23 @@ type DefaultProps = {
     onDateClick: () => void;
     onDateKeyDown: () => void;
     preventKeyboardFocus: boolean;
+    /**
+     * An object to indicate which configuration of the calendar is being used. Choices are `single` date selection or `range` date selection.
+     */
     selectionConfiguration: SelectionConfiguration;
     ignoreOutsideDate: boolean;
     dateProps: {};
 };
 export type Props = DefaultProps & {
     DateComponent: ElementType;
+    /**
+     * A function to format a full, human-readable date, for example: "Monday, 8th January 2018".
+     */
     formatDateFull: (date: Date) => Date | string;
     month: Date;
+    /**
+     * First day of the week. 0 = Sunday, 1 = Monday, ..., 6 = Saturday.
+     */
     weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 };
 type State = {
@@ -53,8 +62,14 @@ declare class BpkCalendarGrid extends Component<Props, State> {
 }
 declare const BpkCalendarGridWithTransition: typeof BpkCalendarGrid | ((props: Omit<DefaultProps & {
     DateComponent: ElementType;
+    /**
+     * A function to format a full, human-readable date, for example: "Monday, 8th January 2018".
+     */
     formatDateFull: (date: Date) => Date | string;
     month: Date;
+    /**
+     * First day of the week. 0 = Sunday, 1 = Monday, ..., 6 = Saturday.
+     */
     weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 } & {
     TransitionComponent: ElementType<any>;

package/bpk-component-calendar/src/BpkCalendarGridHeader.d.ts

@@ -19,11 +19,20 @@
 import { PureComponent } from 'react';
 import type { DaysOfWeek, WeekDayKey } from './custom-proptypes';
 type Props = DefaultProps & {
+    /**
+     * An array of objects describing the days of the week
+     */
     daysOfWeek: DaysOfWeek;
+    /**
+     * First day of the week. 0 = Sunday, 1 = Monday, ..., 6 = Saturday.
+     */
     weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 };
 type DefaultProps = {
     className?: string | null;
+    /**
+     * Key to be used to pick the desired weekDay format from the `daysOfWeek` object, for example: `nameAbbr` or `nameNarrow`.
+     */
     weekDayKey?: WeekDayKey;
 };
 declare class BpkCalendarGridHeader extends PureComponent<Props> {

package/bpk-component-calendar/src/BpkCalendarNav.d.ts

@@ -20,6 +20,10 @@ import type { ChangeEvent, MouseEvent } from 'react';
 type MonthChangeEvent = ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>;
 type Props = {
     changeMonthLabel: string;
+    /**
+     * A function to format a human-readable month, for example: "January 2018":
+     * If you just need to quickly prototype, use the following from [`date-fns`](https://date-fns.org/docs/format#usage)
+     */
     formatMonth: (month: Date) => string;
     id: string;
     maxDate: Date;

package/bpk-component-calendar/src/composeCalendar.d.ts

@@ -18,20 +18,46 @@
 
 import type { ComponentType } from 'react';
 import type { DaysOfWeek, SelectionConfiguration, DateModifiers } from './custom-proptypes';
-type Props = {
+export type Props = {
+    /**
+     * **Required** if Nav !== null
+     */
     changeMonthLabel?: string | null;
+    /**
+     * An array of objects describing the days of the week
+     */
     daysOfWeek: DaysOfWeek;
+    /**
+     * A function to format a full, human-readable date, for example: "Monday, 8th January 2018".
+     */
     formatDateFull: (date: Date) => Date | string;
+    /**
+     * A function to format a human-readable month, for example: "January 2018":
+     * If you just need to quickly prototype, use the following from [`date-fns`](https://date-fns.org/docs/format#usage)
+     */
     formatMonth: (date: Date) => Date | string;
     id: string;
     maxDate: Date;
     minDate: Date;
     month: Date;
+    /**
+     * **Required** if Nav !== null
+     */
     nextMonthLabel?: string | null;
+    /**
+     * **Required** if Nav !== null
+     */
     previousMonthLabel?: string | null;
+    /**
+     * First day of the week. 0 = Sunday, 1 = Monday, ..., 6 = Saturday.
+     */
     weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     className?: string | null;
     dateModifiers?: DateModifiers;
+    /**
+     * If set to true (default), it sets a fixed width on the calendar container. This is necessary to support transitions and to create the right size for the Datepicker component.
+     * If set to false, the calendar is of fluid width and will take up the space of its parent container.
+     */
     fixedWidth?: boolean;
     focusedDate?: Date | null;
     markOutsideDays?: boolean;
@@ -45,10 +71,25 @@ type Props = {
     preventKeyboardFocus?: boolean;
     selectionConfiguration?: SelectionConfiguration;
     gridClassName?: string | null;
+    /**
+     * Key to be used to pick the desired weekDay format from the `daysOfWeek` object, for example: `nameAbbr` or `nameNarrow`.
+     */
     weekDayKey?: string;
+    /**
+     * This is useful if your custom implementation of Nav component requires additional properties. They will be passed, unmodified.
+     */
     navProps?: {} | null;
+    /**
+     * This is useful if your custom implementation of Header component requires additional properties. They will be passed, unmodified.
+     */
     headerProps?: {} | null;
+    /**
+     * This is useful if your custom implementation of Grid component requires additional properties. They will be passed, unmodified.
+     */
     gridProps?: {} | null;
+    /**
+     * This is useful if your custom implementation of Date component requires additional properties. They will be passed, unmodified.
+     */
     dateProps?: {} | null;
 };
 declare const composeCalendar: (Nav: ComponentType<any> | string | null, GridHeader: ComponentType<any> | string | null, Grid: ComponentType<any> | string, CalendarDate: ComponentType<any> | string | null) => ({ changeMonthLabel, className, dateModifiers, dateProps, daysOfWeek, fixedWidth, focusedDate, formatDateFull, formatMonth, gridClassName, gridProps, headerProps, id, markOutsideDays, markToday, maxDate, minDate, month, navProps, nextMonthLabel, onDateClick, onDateKeyDown, onMonthChange, preventKeyboardFocus, previousMonthLabel, selectionConfiguration, weekDayKey, weekStartsOn, }: Props) => JSX.Element;

package/bpk-component-card-button/src/BpkSaveButton.js

@@ -17,7 +17,7 @@
  */
 
 import { useState } from 'react';
-import BpkButtonV2 from "../../bpk-component-button/src/BpkButtonV2/BpkButton";
+import { BpkButtonV2 } from "../../bpk-component-button/src/BpkButtonV2/BpkButton";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkHeartIcon from "../../bpk-component-icon/lg/heart";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.

package/bpk-component-chip/src/BpkDismissibleChip.d.ts

@@ -18,11 +18,6 @@
 
 /// <reference types="react" />
 import type { CommonProps as Props } from './commonTypes';
-
-declare const BpkDismissibleChip: ({
-  className,
-  leadingAccessoryView,
-  type,
-  ...rest
-}: Props) => JSX.Element;
+type BpkDismissibleChipProps = Omit<Props, 'disabled' | 'selected'>;
+declare const BpkDismissibleChip: ({ className, leadingAccessoryView, type, ...rest }: BpkDismissibleChipProps) => JSX.Element;
 export default BpkDismissibleChip;

package/bpk-component-datatable/src/BpkDataTable.js

@@ -167,15 +167,64 @@ const BpkDataTable = props => {
 };
 BpkDataTable.propTypes = {
   rows: PropTypes.arrayOf(Object).isRequired,
-  children: PropTypes.node.isRequired,
+  /**
+   * @deprecated Use the columns prop instead to pass the columns to the BpkDataTable component.
+   */
+  children: PropTypes.node,
+  /**
+   * Array of objects describing the columns of the table.
+   * Note: Header and Cell props are functions to format the header and cell data respectively and should implement the following signatures:
+   * ```Header: function({disableSortBy, accessor, label})```,
+   * ```Cell: function({rowData, rowIndex, accessor, columnIndex, cellData})```
+   */
+  columns: PropTypes.arrayOf(PropTypes.shape({
+    accessor: PropTypes.string.isRequired,
+    Header: PropTypes.func,
+    disableSortBy: PropTypes.bool,
+    width: PropTypes.string,
+    minWidth: PropTypes.string,
+    flexGrow: PropTypes.number,
+    className: PropTypes.string,
+    headerClassName: PropTypes.string,
+    headerStyle: {},
+    Cell: PropTypes.func,
+    label: PropTypes.string,
+    style: {},
+    defaultSortDirection: PropTypes.oneOf(Object.keys(SORT_DIRECTION_TYPES))
+  })),
+  /**
+   * Table height. Please provide this value in rem.
+   */
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * Table width. Please provide this value in rem.
+   * If not provided, the table will expand to fill the available space.
+   */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Height of the header row. Please provide this value in rem.
+   */
   headerHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Height of each row. Please provide this value in rem.
+   */
   rowHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   className: PropTypes.string,
+  /**
+   * The data will be sorted by default based on this column.
+   */
   defaultColumnSortIndex: PropTypes.number,
+  /**
+   * For custom sorting, pass a sort function.
+   */
   sort: PropTypes.func,
+  /**
+   * Use sortBy to specify which column the custom sorting will be applied to.
+   */
   sortBy: PropTypes.string,
+  /**
+   * Use sortDirection to set the direction of sorting. By default, it will be ascending.
+   */
   sortDirection: PropTypes.oneOf(Object.keys(SORT_DIRECTION_TYPES))
 };
 BpkDataTable.defaultProps = {