@skyscanner/backpack-web 31.1.1 → 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-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";
 // @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`.
@@ -60,8 +60,10 @@ const BpkSaveButton = ({
     "aria-label": accessibilityLabel,
     className: getClassName('bpk-save-button', smallSize && 'bpk-save-button__small', `bpk-save-button__${style}`),
     onClick: e => {
-      setToggle(true);
       onCheckedChange(e);
+      if (!checked) {
+        setToggle(true);
+      }
     },
     iconOnly: true,
     children: [/*#__PURE__*/_jsx(HeartIcon, {

package/bpk-component-card-button/src/BpkSaveButton.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes heart-beat{0%,100%{transform:translate(-50%, -50%) scale(1)}10%{transform:translate(-50%, -50%) scale(1.4)}20%{transform:translate(-50%, -50%) scale(1.2)}30%{transform:translate(-50%, -50%) scale(1.3)}50%{transform:translate(-50%, -50%) scale(1.25)}70%{transform:translate(-50%, -50%) scale(1.25)}}.bpk-save-button{position:relative;width:2.5rem;height:2.5rem;padding:0.5rem;border-radius:50%;background-color:transparent}.bpk-no-touch-support .bpk-save-button:hover:not(:active):not(:disabled){background-color:transparent}:global(.bpk-no-touch-support) .bpk-save-button:hover:not(:active):not(:disabled){background-color:transparent}.bpk-save-button:active{background-color:transparent}.bpk-save-button__icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#161616}.bpk-save-button__icon:hover{color:#161616}.bpk-save-button__heartOutlineIcon{z-index:1;opacity:1}.bpk-save-button__heartOutlineIcon--show:hover{transition:opacity 200ms ease-in-out;opacity:0}.bpk-save-button__heartOutlineIcon--hide{opacity:0}.bpk-save-button__heartOutlineIcon--onDark{color:#fff}.bpk-save-button__heartIcon{z-index:2;color:#0062e3;opacity:0}.bpk-save-button__heartIcon--toggle{animation:heart-beat 1s 0s 1 ease-out;animation-fill-mode:forwards}.bpk-save-button__heartIcon--show{opacity:1}.bpk-save-button__heartIcon--show:hover{color:#0062e3}.bpk-save-button__heartIcon--hide:hover{transition:opacity 200ms ease-in-out;color:#161616;opacity:1}.bpk-save-button__heartIcon--onDark{color:#fff}.bpk-save-button__heartIcon--onDark:hover{color:#fff}.bpk-save-button__small{width:2rem;height:2rem;min-height:2rem}.bpk-save-button__contained{background-color:rgba(255,255,255,0.8)}.bpk-no-touch-support .bpk-save-button__contained:hover:not(:active):not(:disabled){background-color:rgba(255,255,255,0.8)}:global(.bpk-no-touch-support) .bpk-save-button__contained:hover:not(:active):not(:disabled){background-color:rgba(255,255,255,0.8)}.bpk-save-button__contained:active{background-color:rgba(255,255,255,0.8)}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes heart-beat{0%,100%{transform:translate(-50%, -50%) scale(1)}10%{transform:translate(-50%, -50%) scale(1.4)}20%{transform:translate(-50%, -50%) scale(1.2)}30%{transform:translate(-50%, -50%) scale(1.3)}50%{transform:translate(-50%, -50%) scale(1.25)}70%{transform:translate(-50%, -50%) scale(1.25)}}.bpk-save-button{position:relative;width:2.5rem;height:2.5rem;padding:0.5rem;border-radius:50%;background-color:transparent}.bpk-no-touch-support .bpk-save-button:hover:not(:active):not(:disabled){background-color:transparent}:global(.bpk-no-touch-support) .bpk-save-button:hover:not(:active):not(:disabled){background-color:transparent}.bpk-save-button:active{background-color:transparent}.bpk-save-button__icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#161616}.bpk-no-touch-support .bpk-save-button__icon:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-save-button__icon:hover:not(:active):not(:disabled){color:#161616}.bpk-save-button__heartOutlineIcon{z-index:1;opacity:1}.bpk-no-touch-support .bpk-save-button__heartOutlineIcon--show:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}:global(.bpk-no-touch-support) .bpk-save-button__heartOutlineIcon--show:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}.bpk-save-button__heartOutlineIcon--hide{opacity:0}.bpk-save-button__heartOutlineIcon--onDark{color:#fff}.bpk-save-button__heartIcon{z-index:2;color:#0062e3;opacity:0}.bpk-save-button__heartIcon--toggle{animation:heart-beat 1s 0s 1 ease-out;animation-fill-mode:forwards}.bpk-save-button__heartIcon--show{opacity:1}.bpk-no-touch-support .bpk-save-button__heartIcon--show:hover:not(:active):not(:disabled){color:#0062e3}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--show:hover:not(:active):not(:disabled){color:#0062e3}.bpk-no-touch-support .bpk-save-button__heartIcon--hide:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;color:#161616;opacity:1}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--hide:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;color:#161616;opacity:1}.bpk-save-button__heartIcon--onDark{color:#fff}.bpk-no-touch-support .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){color:#fff}.bpk-save-button__small{width:2rem;height:2rem;min-height:2rem}.bpk-save-button__contained{background-color:rgba(255,255,255,0.8)}.bpk-no-touch-support .bpk-save-button__contained:hover:not(:active):not(:disabled){background-color:rgba(255,255,255,0.8)}:global(.bpk-no-touch-support) .bpk-save-button__contained:hover:not(:active):not(:disabled){background-color:rgba(255,255,255,0.8)}.bpk-save-button__contained:active{background-color:rgba(255,255,255,0.8)}

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.1",
+  "version": "31.2.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",