@skyscanner/backpack-web 36.7.1 → 36.8.1

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

@@ -125,7 +125,6 @@ class BpkCalendarDate extends PureComponent {
       type: "button",
       style: style,
       className: classNames.join(' '),
-      "aria-hidden": isBlocked,
       "aria-label": `${date.getDate()}`,
       disabled: isBlocked,
       tabIndex: isKeyboardFocusable && isFocused ? 0 : -1,

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

@@ -18,7 +18,6 @@
 
 import { Component } from 'react';
 import { cssModules, isDeviceIos } from "../../bpk-react-utils";
-import deferCallback from "../../bpk-react-utils/src/deferCallback";
 import { addCalendarGridTransition } from "./BpkCalendarGridTransition";
 import BpkCalendarWeek from "./BpkCalendarWeek";
 import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
@@ -65,10 +64,9 @@ class BpkCalendarGrid extends Component {
     };
   }
   componentDidMount() {
-    // Defer expensive date formatting until after render to improve INP.
-    deferCallback(() => this.setState({
+    this.setState({
       calendarMonthWeeks: getCalendar(this.props.month, this.props.weekStartsOn, this.props.formatDateFull)
-    }));
+    });
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
     // We cache expensive calculations (and identities) in state
@@ -106,7 +104,9 @@ class BpkCalendarGrid extends Component {
     return /*#__PURE__*/_jsx("div", {
       className: classNames,
       "aria-hidden": !isKeyboardFocusable,
+      role: "grid",
       children: /*#__PURE__*/_jsx("div", {
+        role: "rowgroup",
         children: calendarMonthWeeks.map(dates => /*#__PURE__*/_jsx(BpkCalendarWeek, {
           month: month,
           dates: dates,

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

@@ -267,6 +267,7 @@ class BpkCalendarWeek extends Component {
     }
     return /*#__PURE__*/_jsx("div", {
       className: getClassName('bpk-calendar-week'),
+      role: "row",
       children: this.props.dates.map(date => {
         const isBlocked = minDate && maxDate ? !isWithinRange(date.val, {
           start: minDate,
@@ -276,7 +277,6 @@ class BpkCalendarWeek extends Component {
         return /*#__PURE__*/_jsx(DateContainer, {
           className: cellClassName,
           isEmptyCell: !isSameMonth(date.val, month) && ignoreOutsideDate,
-          isBlocked: isBlocked,
           selectionType: dateSelectionType,
           children: /*#__PURE__*/_jsx(DateComponent, {
             date: date.val,
@@ -306,14 +306,14 @@ class BpkCalendarWeek extends Component {
 const DateContainer = ({
   children,
   className = null,
-  isBlocked,
   isEmptyCell,
   selectionType
 }) => {
   const classNames = getClassName('bpk-calendar-week__date', `bpk-calendar-week__date--${selectionType}`, className);
   return /*#__PURE__*/_jsx("div", {
-    "aria-hidden": isEmptyCell || isBlocked,
+    "aria-hidden": isEmptyCell,
     className: classNames,
+    role: "gridcell",
     children: children
   });
 };

package/bpk-component-popover/src/BpkPopover.d.ts

@@ -33,6 +33,7 @@ export type Props = CloseButtonProps & {
     actionText?: string;
     onAction?: () => void;
     renderTarget?: () => HTMLElement | HTMLElement | undefined;
+    [rest: string]: any;
 };
 declare const BpkPopover: ({ actionText, children, className, closeButtonIcon, closeButtonLabel, closeButtonProps, closeButtonText, hoverable, id, isOpen, label, labelAsTitle, onAction, onClose, padded, placement, renderTarget, showArrow, target, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkPopover;

package/package.json

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

package/bpk-react-utils/src/__mocks__/deferCallback.d.ts

@@ -1,9 +0,0 @@
-/**
- * Mock deferCallback to immediately invoke the callback. This ensures that
- * asynchronous state updates triggered by `deferCallback` run before asserting.
- * https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
- * @param {function} callback - callback to execute, value cannot be returned.
- * You'll typically want to wrap the callback `setState` to update React state.
- * @returns {void}
- */
-export default function deferCallback(callback: () => void): void;

package/bpk-react-utils/src/__mocks__/deferCallback.js

@@ -1,29 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * Mock deferCallback to immediately invoke the callback. This ensures that
- * asynchronous state updates triggered by `deferCallback` run before asserting.
- * https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
- * @param {function} callback - callback to execute, value cannot be returned.
- * You'll typically want to wrap the callback `setState` to update React state.
- * @returns {void}
- */
-export default function deferCallback(callback) {
-  callback();
-}

package/bpk-react-utils/src/deferCallback.d.ts

@@ -1,13 +0,0 @@
-/**
- * Defer a task until the browser is idle, or till the next "tick" if the
- * browser does not support the idle callback API. This is useful for deferring
- * computationally heavy, non-essential tasks to keep the UI responsive. If the
- * task has not completed within the timeout, it will be executed regardless.
- *
- * https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
- * @param {function} callback - callback to execute, value cannot be returned.
- * You'll typically want to wrap the callback `setState` to update React state.
- * @returns {void}
- */
-declare const deferCallback: (callback: () => void) => void;
-export default deferCallback;

package/bpk-react-utils/src/deferCallback.js

@@ -1,39 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * Defer a task until the browser is idle, or till the next "tick" if the
- * browser does not support the idle callback API. This is useful for deferring
- * computationally heavy, non-essential tasks to keep the UI responsive. If the
- * task has not completed within the timeout, it will be executed regardless.
- *
- * https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
- * @param {function} callback - callback to execute, value cannot be returned.
- * You'll typically want to wrap the callback `setState` to update React state.
- * @returns {void}
- */
-const deferCallback = callback => {
-  if (window.requestIdleCallback) {
-    window.requestIdleCallback(callback, {
-      timeout: 500
-    });
-  } else {
-    setTimeout(callback, 0);
-  }
-};
-export default deferCallback;