@skyscanner/backpack-web 36.3.0 → 36.4.0

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

@@ -22,6 +22,7 @@ import { addCalendarGridTransition } from "./BpkCalendarGridTransition";
 import BpkCalendarWeek from "./BpkCalendarWeek";
 import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
 import { addMonths, formatIsoDate, getCalendarMonthWeeks, isSameMonth } from "./date-utils";
+import { memoize } from "./utils";
 import STYLES from "./BpkCalendarGrid.module.css";
 
 // This should be imported after `./BpkCalendarGrid.module.css`.
@@ -107,7 +108,7 @@ class BpkCalendarGrid extends Component {
           dates: dates,
           onDateClick: onDateClick,
           onDateKeyDown: onDateKeyDown,
-          formatDateFull: formatDateFull,
+          formatDateFull: memoize(formatDateFull),
           DateComponent: DateComponent,
           dateModifiers: dateModifiers,
           preventKeyboardFocus: preventKeyboardFocus,

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

@@ -18,6 +18,7 @@
 
 import { cssModules } from "../../bpk-react-utils";
 import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
+import { memoize } from "./utils";
 import STYLES from "./BpkCalendar.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -82,7 +83,7 @@ const composeCalendar = (Nav, GridHeader, Grid, CalendarDate) => {
       className: classNames.join(' '),
       children: [Nav && /*#__PURE__*/_jsx(Nav, {
         changeMonthLabel: changeMonthLabel,
-        formatMonth: formatMonth,
+        formatMonth: memoize(formatMonth),
         id: `${id}__bpk_calendar_nav`,
         maxDate: maxDate,
         minDate: minDate,
@@ -105,7 +106,7 @@ const composeCalendar = (Nav, GridHeader, Grid, CalendarDate) => {
         dateModifiers: dateModifiers,
         daysOfWeek: daysOfWeek,
         formatDateFull: formatDateFull,
-        formatMonth: formatMonth,
+        formatMonth: memoize(formatMonth),
         month: month,
         onDateClick: onDateClick,
         onDateKeyDown: onDateKeyDown,

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

@@ -6,3 +6,38 @@ export declare const getTransformStyles: (transformValue: string) => {
     WebkitTransform: string;
 };
 export declare const isTransitionEndSupported: () => boolean;
+/**
+ * Memoizes a given function to optimize performance by caching its results based on input arguments.
+ *
+ * @template T - The type of the function to be memoized. Must be a function.
+ * @param {T} fn - The function to be memoized.
+ * @returns {T} - The memoized version of the input function. Subsequent calls with the same arguments
+ *                will return the cached result, avoiding redundant computations.
+ *
+ * @example
+ * // Simple usage:
+ * const add = (a: number, b: number) => a + b;
+ * const memoizedAdd = memoize(add);
+ *
+ * console.log(memoizedAdd(1, 2)); // Computes and caches result: 3
+ * console.log(memoizedAdd(1, 2)); // Fetches from cache: 3
+ *
+ * @example
+ * // With a more complex function:
+ * const slowFunction = (num: number) => {
+ *   console.log('Computing...');
+ *   return num * 2;
+ * };
+ * const memoizedSlowFunction = memoize(slowFunction);
+ *
+ * console.log(memoizedSlowFunction(5)); // Logs "Computing...", returns 10
+ * console.log(memoizedSlowFunction(5)); // Fetches from cache: 10
+ *
+ * @remarks
+ * - This implementation uses a `Map` object and `JSON.stringify` to create cache keys.
+ * - Functions with non-primitive or cyclic arguments may not work as expected due to
+ *   `JSON.stringify` limitations.
+ * - The cache is stored in memory and will grow indefinitely unless manually managed or
+ *   the function goes out of scope.
+ */
+export declare function memoize<T extends (...args: any[]) => any>(fn: T): T;

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

@@ -45,4 +45,52 @@ export const getTransformStyles = transformValue => {
     WebkitTransform: transform
   };
 };
-export const isTransitionEndSupported = () => !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
+export const isTransitionEndSupported = () => !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
+
+/**
+ * Memoizes a given function to optimize performance by caching its results based on input arguments.
+ *
+ * @template T - The type of the function to be memoized. Must be a function.
+ * @param {T} fn - The function to be memoized.
+ * @returns {T} - The memoized version of the input function. Subsequent calls with the same arguments
+ *                will return the cached result, avoiding redundant computations.
+ *
+ * @example
+ * // Simple usage:
+ * const add = (a: number, b: number) => a + b;
+ * const memoizedAdd = memoize(add);
+ *
+ * console.log(memoizedAdd(1, 2)); // Computes and caches result: 3
+ * console.log(memoizedAdd(1, 2)); // Fetches from cache: 3
+ *
+ * @example
+ * // With a more complex function:
+ * const slowFunction = (num: number) => {
+ *   console.log('Computing...');
+ *   return num * 2;
+ * };
+ * const memoizedSlowFunction = memoize(slowFunction);
+ *
+ * console.log(memoizedSlowFunction(5)); // Logs "Computing...", returns 10
+ * console.log(memoizedSlowFunction(5)); // Fetches from cache: 10
+ *
+ * @remarks
+ * - This implementation uses a `Map` object and `JSON.stringify` to create cache keys.
+ * - Functions with non-primitive or cyclic arguments may not work as expected due to
+ *   `JSON.stringify` limitations.
+ * - The cache is stored in memory and will grow indefinitely unless manually managed or
+ *   the function goes out of scope.
+ */
+export function memoize(fn) {
+  const cache = new Map();
+  function memoizedFunction(...args) {
+    const key = JSON.stringify(args);
+    if (cache.has(key)) {
+      return cache.get(key);
+    }
+    const result = fn(...args);
+    cache.set(key, result);
+    return result;
+  }
+  return memoizedFunction;
+}

package/package.json

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