@skyscanner/backpack-web 31.1.2 → 31.2.0

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

@@ -41,6 +41,7 @@ export type Props = {
     initiallyFocusedDate?: Date | null;
     markToday?: boolean;
     markOutsideDays?: boolean;
+    customRowHeight?: number;
 };
 type InjectedProps = {
     onDateClick: ((date: Date) => void) | null;
@@ -105,6 +106,7 @@ declare const withCalendarState: <P extends object>(Calendar: ComponentType<P>)
         initiallyFocusedDate: null;
         markToday: boolean;
         markOutsideDays: boolean;
+        customRowHeight?: number;
     };
     contextType?: import("react").Context<any> | undefined;
 };
@@ -157,6 +159,7 @@ declare const _default: {
         initiallyFocusedDate: null;
         markToday: boolean;
         markOutsideDays: boolean;
+        customRowHeight?: number;
     };
     contextType?: import("react").Context<any> | undefined;
 };

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

@@ -71,6 +71,7 @@ export type Props = {
     preventKeyboardFocus?: boolean;
     selectionConfiguration?: SelectionConfiguration;
     gridClassName?: string | null;
+    customRowHeight?: number;
     /**
      * Key to be used to pick the desired weekDay format from the `daysOfWeek` object, for example: `nameAbbr` or `nameNarrow`.
      */

package/bpk-component-calendar/src/composeCalendar.js

@@ -26,6 +26,7 @@ const composeCalendar = (Nav, GridHeader, Grid, CalendarDate) => {
   const BpkCalendar = ({
     changeMonthLabel = null,
     className = null,
+    customRowHeight,
     dateModifiers = {},
     dateProps = {},
     daysOfWeek,
@@ -116,6 +117,7 @@ const composeCalendar = (Nav, GridHeader, Grid, CalendarDate) => {
         className: gridClasses.join(' '),
         dateProps: dateProps,
         selectionConfiguration: selectionConfiguration,
+        customRowHeight: customRowHeight,
         ...gridProps
       })]
     });

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.d.ts

@@ -29,6 +29,7 @@ type Props = Partial<BpkCalendarGridProps> & {
     focusedDate?: Date | null;
     selectionConfiguration?: SelectionConfiguration;
     className?: string | null;
+    customRowHeight?: number;
 };
 declare const BpkScrollableCalendarGridList: (props: Props) => JSX.Element;
 export default BpkScrollableCalendarGridList;

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js

@@ -29,20 +29,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 
 // These constants are here to facilitate calculating the height
-// Row and month item heights are defined in rem to support text scaling
-const ROW_HEIGHT = 2.75;
 // This is the additional height of each grid without any rows.
 const BASE_MONTH_ITEM_HEIGHT = 8.125;
 const COLUMN_COUNT = 7;
 // Most browsers have by default 16px root font size
 const DEFAULT_ROOT_FONT_SIZE = 16;
-// Most calendar grids have 5 rows. Calculate height in px as this is what react-window expects.
-const ESTIMATED_MONTH_ITEM_HEIGHT = (BASE_MONTH_ITEM_HEIGHT + 5 * ROW_HEIGHT) * DEFAULT_ROOT_FONT_SIZE;
 // Minimum month item width (useful for server-side rendering. This value will be overridden with an accurate width after mounting)
 const ESTIMATED_MONTH_ITEM_WIDTH = BASE_MONTH_ITEM_HEIGHT * 7 * DEFAULT_ROOT_FONT_SIZE;
 const BpkScrollableCalendarGridList = props => {
   const {
     className = null,
+    customRowHeight = 2.75,
     focusedDate = null,
     minDate,
     selectionConfiguration,
@@ -52,13 +49,18 @@ const BpkScrollableCalendarGridList = props => {
   const startDate = startOfDay(startOfMonth(minDate));
   const endDate = startOfDay(startOfMonth(rest.maxDate));
   const monthsCount = DateUtils.differenceInCalendarMonths(endDate, startDate);
+
+  // Row and month item heights are defined in rem to support text scaling
+  const rowHeight = customRowHeight;
+  // Most calendar grids have 5 rows. Calculate height in px as this is what react-window expects.
+  const estimatedMonthItemHeight = (BASE_MONTH_ITEM_HEIGHT + 5 * rowHeight) * DEFAULT_ROOT_FONT_SIZE;
   const getInitialRootFontSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize) || DEFAULT_ROOT_FONT_SIZE;
 
   // The `react-window` API requires the height in pixels to be specified
   // To be able to scale text size, we use rem and then we get the root font size so that we can calculate the final value in px
   const [rootFontSize, setRootFontSize] = useState(getInitialRootFontSize);
   const months = useMemo(() => getMonthsArray(startDate, monthsCount), [minDate, monthsCount]);
-  const monthItemHeights = useMemo(() => getMonthItemHeights(months, rest.weekStartsOn, COLUMN_COUNT, ROW_HEIGHT * rootFontSize, BASE_MONTH_ITEM_HEIGHT * rootFontSize), [rootFontSize, months, rest.weekStartsOn]);
+  const monthItemHeights = useMemo(() => getMonthItemHeights(months, rest.weekStartsOn, COLUMN_COUNT, rowHeight * rootFontSize, BASE_MONTH_ITEM_HEIGHT * rootFontSize), [rootFontSize, months, rest.weekStartsOn]);
   useEffect(() => {
     // this is required by the react-window library in order to re-render the list whenever an item's size changes
     if (listRef.current) {
@@ -66,7 +68,7 @@ const BpkScrollableCalendarGridList = props => {
     }
   }, [monthItemHeights]);
   const getHtmlElement = () => typeof document !== 'undefined' ? document.querySelector('html') : {};
-  const getItemSize = index => monthItemHeights[index] || ESTIMATED_MONTH_ITEM_HEIGHT;
+  const getItemSize = index => monthItemHeights[index] || estimatedMonthItemHeight;
   const rowRenderer = ({
     index,
     style
@@ -103,7 +105,7 @@ const BpkScrollableCalendarGridList = props => {
     className: getClassName('bpk-scrollable-calendar-grid-list', className),
     children: /*#__PURE__*/_jsx(AutoSizer, {
       onResize: onResize,
-      defaultHeight: ESTIMATED_MONTH_ITEM_HEIGHT,
+      defaultHeight: estimatedMonthItemHeight,
       defaultWidth: ESTIMATED_MONTH_ITEM_WIDTH,
       children: ({
         height,
@@ -114,7 +116,7 @@ const BpkScrollableCalendarGridList = props => {
         } : {},
         width: width,
         height: height,
-        estimatedItemSize: ESTIMATED_MONTH_ITEM_HEIGHT,
+        estimatedItemSize: estimatedMonthItemHeight,
         itemSize: getItemSize,
         itemCount: months.length,
         overscanCount: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "31.1.2",
+  "version": "31.2.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",