@skyscanner/backpack-web 25.7.0-beta → 25.7.0-beta.2

package/bpk-component-datatable/src/sort-types.js

@@ -14,22 +14,9 @@
  * 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.
- */
-
-/* @flow strict */
-
-// This file exists to break a cycle that would otherwise happen between
+ */ // This file exists to break a cycle that would otherwise happen between
 // BpkDataTableColumn.js and common-types.js
-
 export const SORT_DIRECTION_TYPES = {
   ASC: 'ASC',
-  DESC: 'DESC',
-};
-
-export type SortDirectionType = 'ASC' | ' DESC';
-
-export type SortProps = {
-  sortBy: ?string,
-  sortDirection: ?SortDirectionType,
-  sort: ?Function,
-};
+  DESC: 'DESC'
+};

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

@@ -14,74 +14,90 @@
  * 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.
- */
-/* @flow strict */
-
-// TODO: Remove these functions once we want to change the API to match the react-table library API
+ */ // TODO: Remove these functions once we want to change the API to match the react-table library API
 // To maintain backwards compatibility with the old API of BpkDataTable which takes columns as children
 // The `react-table` library however expects columns as an array of objects
 // eslint-disable-next-line import/prefer-default-export
-export const getColumns = (columns) =>
-  columns.map((column) => {
-    const { cellDataGetter, cellRenderer, headerRenderer } = column.props;
-    // To maintain backwards compatibility with the old API of BpkDataTable we rename the parameters
-    // And create an interface so that the function signature doesn't depend on the underlying library
-    const columnCellRenderer = ({
-      column: { id: dataKey },
-      columns: columnsData,
-      row: { id: rowID, values: rowData },
-      sortedRows,
-      value: cellData,
-    }) => {
-      const columnIndex = columnsData.map((col) => col.id).indexOf(dataKey);
-      const rowIndex = sortedRows.map((row) => row.id).indexOf(rowID);
-
-      return cellRenderer({
-        cellData,
-        columnIndex,
-        dataKey,
-        rowData,
-        rowIndex,
-      });
-    };
-
-    const columnCellDataGetter = ({
-      column: { id: dataKey },
-      row: { values: rowData },
-    }) => cellDataGetter({ dataKey, rowData });
-
-    const columnHeaderRenderer = ({
-      column: { disableSortBy: disableSort, id: dataKey, label },
-    }) => headerRenderer({ dataKey, label, disableSort });
-
-    const {
-      className,
+export const getColumns = columns => columns.map(column => {
+  const {
+    cellDataGetter,
+    cellRenderer,
+    headerRenderer
+  } = column.props;
+  // To maintain backwards compatibility with the old API of BpkDataTable we rename the parameters
+  // And create an interface so that the function signature doesn't depend on the underlying library
+  const columnCellRenderer = ({
+    column: {
+      id: dataKey
+    },
+    columns: columnsData,
+    row: {
+      id: rowID,
+      values: rowData
+    },
+    sortedRows,
+    value: cellData
+  }) => {
+    const columnIndex = columnsData.map(col => col.id).indexOf(dataKey);
+    const rowIndex = sortedRows.map(row => row.id).indexOf(rowID);
+    return cellRenderer({
+      cellData,
+      columnIndex,
       dataKey,
-      defaultSortDirection,
-      disableSort,
-      flexGrow,
-      headerClassName,
-      headerStyle,
-      label,
-      minWidth,
-      style,
-      width,
-    } = column.props;
-    return {
-      Header: headerRenderer ? columnHeaderRenderer : label,
-      accessor: dataKey,
-      ...((cellRenderer || cellDataGetter) && {
-        Cell: columnCellRenderer || columnCellDataGetter,
-      }),
-      className,
+      rowData,
+      rowIndex
+    });
+  };
+  const columnCellDataGetter = ({
+    column: {
+      id: dataKey
+    },
+    row: {
+      values: rowData
+    }
+  }) => cellDataGetter({
+    dataKey,
+    rowData
+  });
+  const columnHeaderRenderer = ({
+    column: {
       disableSortBy: disableSort,
-      defaultSortDirection,
-      flexGrow,
-      headerClassName,
-      headerStyle,
-      label,
-      minWidth,
-      style,
-      width,
-    };
+      id: dataKey,
+      label
+    }
+  }) => headerRenderer({
+    dataKey,
+    label,
+    disableSort
   });
+  const {
+    className,
+    dataKey,
+    defaultSortDirection,
+    disableSort,
+    flexGrow,
+    headerClassName,
+    headerStyle,
+    label,
+    minWidth,
+    style,
+    width
+  } = column.props;
+  return {
+    Header: headerRenderer ? columnHeaderRenderer : label,
+    accessor: dataKey,
+    ...((cellRenderer || cellDataGetter) && {
+      Cell: columnCellRenderer || columnCellDataGetter
+    }),
+    className,
+    disableSortBy: disableSort,
+    defaultSortDirection,
+    flexGrow,
+    headerClassName,
+    headerStyle,
+    label,
+    minWidth,
+    style,
+    width
+  };
+});

package/bpk-component-datepicker/{index.ts → index.js}

@@ -16,10 +16,8 @@
  * limitations under the License.
  */
 
-import { CALENDAR_SELECTION_TYPE } from '../bpk-component-calendar';
-
-import BpkDatepicker from './src/BpkDatepicker';
-import themeAttributes from './src/themeAttributes';
-
+import { CALENDAR_SELECTION_TYPE } from "../bpk-component-calendar";
+import BpkDatepicker from "./src/BpkDatepicker";
+import themeAttributes from "./src/themeAttributes";
 export default BpkDatepicker;
-export { CALENDAR_SELECTION_TYPE, themeAttributes };
+export { CALENDAR_SELECTION_TYPE, themeAttributes };

package/bpk-component-datepicker/src/BpkDatepicker.js

@@ -0,0 +1,267 @@
+/*
+ * 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.
+ */
+
+import { createRef, Component } from 'react';
+import BpkInput, { withOpenEvents } from "../../bpk-component-input";
+import BpkModal from "../../bpk-component-modal";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkPopover from "../../bpk-component-popover";
+import { cssModules } from "../../bpk-react-utils";
+import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
+import { composeCalendar, BpkCalendarGridHeader, BpkCalendarGrid, BpkCalendarDate, withCalendarState, CALENDAR_SELECTION_TYPE, DateUtils, BpkCalendarNav } from "../../bpk-component-calendar";
+import STYLES from "./BpkDatepicker.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const Input = withOpenEvents(BpkInput);
+const DefaultCalendar = withCalendarState(composeCalendar(BpkCalendarNav, BpkCalendarGridHeader, BpkCalendarGrid, BpkCalendarDate));
+class BpkDatepicker extends Component {
+  static defaultProps = {
+    calendarComponent: DefaultCalendar,
+    inputComponent: null,
+    dateModifiers: {},
+    inputProps: {},
+    fixedWidth: true,
+    markOutsideDays: true,
+    markToday: DefaultCalendar.defaultProps.markToday,
+    maxDate: DefaultCalendar.defaultProps.maxDate,
+    minDate: DefaultCalendar.defaultProps.minDate,
+    nextMonthLabel: null,
+    onDateSelect: null,
+    onOpenChange: null,
+    onMonthChange: null,
+    previousMonthLabel: null,
+    selectionConfiguration: {
+      type: CALENDAR_SELECTION_TYPE.single,
+      date: null
+    },
+    initiallyFocusedDate: null,
+    renderTarget: null,
+    isOpen: false,
+    valid: null
+  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: props.isOpen
+    };
+    this.inputRef = /*#__PURE__*/createRef();
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      isOpen
+    } = this.props;
+    if (prevProps.isOpen !== isOpen && prevState.isOpen !== isOpen) {
+      if (isOpen) {
+        this.onOpen();
+      } else {
+        this.onClose();
+      }
+    }
+  }
+  onOpen = () => {
+    this.setState({
+      isOpen: true
+    });
+    if (this.props.onOpenChange) {
+      this.props.onOpenChange(true);
+    }
+  };
+  onClose = () => {
+    this.setState({
+      isOpen: false
+    });
+    if (this.props.onOpenChange) {
+      this.props.onOpenChange(false);
+    }
+  };
+
+  /**
+   * Gets the correct label for the input field to be supplied to the aria-label
+   * @param {Object} selectionConfiguration current selection configuration
+   * @param {Function} formatDateFull function supplied to format date
+   * @returns {String} date string
+   */
+  getLabel = (selectionConfiguration, formatDateFull) => {
+    if (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.single && selectionConfiguration.date) {
+      return formatDateFull(selectionConfiguration.date);
+    }
+    if (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range) {
+      if (selectionConfiguration.startDate && !selectionConfiguration.endDate) {
+        return formatDateFull(selectionConfiguration.startDate);
+      }
+      if (selectionConfiguration.startDate && selectionConfiguration.endDate) {
+        return `${formatDateFull(selectionConfiguration.startDate)} - ${formatDateFull(selectionConfiguration.endDate)}`;
+      }
+    }
+    return '';
+  };
+
+  /**
+   * Gets the correct value for the input field
+   * @param {Object} selectionConfiguration current selection configuration
+   * @param {Function} formatDate function supplied to format date
+   * @returns {String} date value
+   */
+  getValue = (selectionConfiguration, formatDate) => {
+    if (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.single && selectionConfiguration.date) {
+      return formatDate(selectionConfiguration.date);
+    }
+    if (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range) {
+      if (selectionConfiguration.startDate && !selectionConfiguration.endDate) {
+        return formatDate(selectionConfiguration.startDate);
+      }
+      if (selectionConfiguration.startDate && selectionConfiguration.endDate) {
+        return `${formatDate(selectionConfiguration.startDate)} - ${formatDate(selectionConfiguration.endDate)}`;
+      }
+    }
+    return '';
+  };
+  handleDateSelect = (startDate, endDate = null) => {
+    const {
+      maxDate,
+      minDate,
+      onClose,
+      onDateSelect,
+      selectionConfiguration
+    } = this.props;
+
+    // When the calendar is a single date we always want to close it when a date is selected
+    // or if its a range calendar we only want to close the calendar when a range is selected.
+    // If a custom onClose function is provided then we don't want to run the internal version.
+    if (selectionConfiguration && (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.single || selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range && endDate) && !onClose) {
+      this.onClose();
+    }
+    if (onDateSelect) {
+      const newStartDate = DateUtils.dateToBoundaries(startDate, DateUtils.startOfDay(minDate), DateUtils.startOfDay(maxDate));
+      const newEndDate = DateUtils.dateToBoundaries(endDate, DateUtils.startOfDay(minDate), DateUtils.startOfDay(maxDate));
+      if (selectionConfiguration && selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range && selectionConfiguration.startDate && !selectionConfiguration.endDate && (DateUtils.isAfter(newEndDate, selectionConfiguration.startDate) || DateUtils.isSameDay(newEndDate, selectionConfiguration.startDate))) {
+        onDateSelect(selectionConfiguration.startDate, newEndDate);
+      } else {
+        onDateSelect(newStartDate);
+      }
+    }
+  };
+  render() {
+    const {
+      calendarComponent: Calendar,
+      changeMonthLabel,
+      closeButtonText,
+      dateModifiers,
+      daysOfWeek,
+      fixedWidth,
+      formatDate,
+      formatDateFull,
+      formatMonth,
+      getApplicationElement,
+      id,
+      initiallyFocusedDate,
+      inputComponent,
+      inputProps,
+      markOutsideDays,
+      markToday,
+      maxDate,
+      minDate,
+      nextMonthLabel,
+      onMonthChange,
+      previousMonthLabel,
+      renderTarget,
+      selectionConfiguration,
+      title,
+      valid,
+      weekStartsOn,
+      ...rest
+    } = this.props;
+
+    // The following props are not used in render
+    delete rest.onDateSelect;
+    delete rest.onOpenChange;
+    delete rest.isOpen;
+    const input = inputComponent || /*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-datepicker__input'),
+      ref: this.inputRef,
+      children: /*#__PURE__*/_jsx(Input, {
+        id: id,
+        name: `${id}_input`,
+        value: this.getValue(selectionConfiguration, formatDate),
+        "aria-live": "assertive",
+        "aria-atomic": "true",
+        "aria-label": this.getLabel(selectionConfiguration, formatDateFull),
+        onChange: () => null,
+        onOpen: this.onOpen,
+        isOpen: this.state.isOpen,
+        valid: valid,
+        ...inputProps
+      })
+    });
+    const calendarProps = {
+      id: `${id}-calendar`,
+      className: getClassName('bpk-datepicker__calendar'),
+      changeMonthLabel,
+      dateModifiers,
+      daysOfWeek,
+      formatDateFull,
+      formatMonth,
+      markOutsideDays,
+      markToday,
+      maxDate,
+      minDate,
+      nextMonthLabel,
+      onDateSelect: this.handleDateSelect,
+      onMonthChange,
+      previousMonthLabel,
+      weekStartsOn,
+      initiallyFocusedDate,
+      selectionConfiguration
+    };
+    return /*#__PURE__*/_jsx(BpkBreakpoint, {
+      query: BREAKPOINTS.MOBILE,
+      children: isMobile => isMobile ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [input, /*#__PURE__*/_jsx(BpkModal, {
+          id: `${id}-modal`,
+          renderTarget: renderTarget,
+          onClose: this.props.onClose || this.onClose,
+          isOpen: this.state.isOpen,
+          title: title,
+          closeLabel: closeButtonText,
+          getApplicationElement: getApplicationElement,
+          children: /*#__PURE__*/_jsx(Calendar, {
+            ...calendarProps,
+            fixedWidth: false
+          })
+        })]
+      }) : /*#__PURE__*/_jsx(BpkPopover, {
+        id: `${id}-popover`,
+        target: input,
+        renderTarget: renderTarget,
+        onClose: this.props.onClose || this.onClose,
+        isOpen: this.state.isOpen,
+        label: title,
+        closeButtonText: closeButtonText,
+        tabIndex: 0,
+        ...rest,
+        children: /*#__PURE__*/_jsx(Calendar, {
+          ...calendarProps,
+          fixedWidth: fixedWidth
+        })
+      })
+    });
+  }
+}
+export default BpkDatepicker;

package/bpk-component-datepicker/src/{themeAttributes.ts → themeAttributes.js}

@@ -16,15 +16,8 @@
  * limitations under the License.
  */
 
-import { themeAttributes as calendarAttributes } from '../../bpk-component-calendar';
-import { themeAttributes as modalAttributes } from '../../bpk-component-modal';
+import { themeAttributes as calendarAttributes } from "../../bpk-component-calendar";
+import { themeAttributes as modalAttributes } from "../../bpk-component-modal";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { themeAttributes as popoverAttributes } from '../../bpk-component-popover';
-
-export default [
-  ...calendarAttributes,
-  ...popoverAttributes,
-  ...modalAttributes,
-].filter(
-  (attribute, index, attributes) => attributes.indexOf(attribute) === index,
-);
+import { themeAttributes as popoverAttributes } from "../../bpk-component-popover";
+export default [...calendarAttributes, ...popoverAttributes, ...modalAttributes].filter((attribute, index, attributes) => attributes.indexOf(attribute) === index);

package/bpk-component-description-list/index.js

@@ -16,8 +16,7 @@
  * limitations under the License.
  */
 
-import BpkDescriptionList from './src/BpkDescriptionList';
-import BpkDescriptionTerm from './src/BpkDescriptionTerm';
-import BpkDescriptionDetails from './src/BpkDescriptionDetails';
-
-export { BpkDescriptionList, BpkDescriptionTerm, BpkDescriptionDetails };
+import BpkDescriptionList from "./src/BpkDescriptionList";
+import BpkDescriptionTerm from "./src/BpkDescriptionTerm";
+import BpkDescriptionDetails from "./src/BpkDescriptionDetails";
+export { BpkDescriptionList, BpkDescriptionTerm, BpkDescriptionDetails };

package/bpk-component-description-list/src/BpkDescriptionDetails.js

@@ -16,6 +16,5 @@
  * limitations under the License.
  */
 
-import buildComponent from './ComponentFactory';
-
-export default buildComponent('dd', 'bpk-description-list__details');
+import buildComponent from "./ComponentFactory";
+export default buildComponent('dd', 'bpk-description-list__details');

package/bpk-component-description-list/src/BpkDescriptionList.js

@@ -16,6 +16,5 @@
  * limitations under the License.
  */
 
-import buildComponent from './ComponentFactory';
-
-export default buildComponent('dl', 'bpk-description-list');
+import buildComponent from "./ComponentFactory";
+export default buildComponent('dl', 'bpk-description-list');

package/bpk-component-description-list/src/BpkDescriptionTerm.js

@@ -16,6 +16,5 @@
  * limitations under the License.
  */
 
-import buildComponent from './ComponentFactory';
-
-export default buildComponent('dt', 'bpk-description-list__term');
+import buildComponent from "./ComponentFactory";
+export default buildComponent('dt', 'bpk-description-list__term');

package/bpk-component-description-list/src/ComponentFactory.js

@@ -17,38 +17,33 @@
  */
 
 import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkDescriptionList.module.scss';
-
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkDescriptionList.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
 const buildComponent = (TagName, baseClassName) => {
-  const Component = ({ children, className, ...rest }) => {
+  const Component = ({
+    children,
+    className,
+    ...rest
+  }) => {
     const classNames = [getClassName(baseClassName)];
-
     if (className) {
       classNames.push(className);
     }
-
-    return (
-      <TagName className={classNames.join(' ')} {...rest}>
-        {children}
-      </TagName>
-    );
+    return /*#__PURE__*/_jsx(TagName, {
+      className: classNames.join(' '),
+      ...rest,
+      children: children
+    });
   };
-
   Component.propTypes = {
     children: PropTypes.node.isRequired,
-    className: PropTypes.string,
+    className: PropTypes.string
   };
-
   Component.defaultProps = {
-    className: null,
+    className: null
   };
-
   return Component;
 };
-
-export default buildComponent;
+export default buildComponent;

package/{bpk-component-banner-alert/src/themeAttributes.ts → bpk-component-dialog/index.js}

@@ -16,9 +16,7 @@
  * limitations under the License.
  */
 
-export default [
-  'bannerAlertPrimaryColor',
-  'bannerAlertSuccessColor',
-  'bannerAlertWarnColor',
-  'bannerAlertErrorColor',
-];
+import BpkDialog from "./src/BpkDialog";
+import { HEADER_ICON_TYPES } from "./src/common-types";
+export default BpkDialog;
+export { HEADER_ICON_TYPES };

package/bpk-component-dialog/src/BpkDialog.js

@@ -0,0 +1,63 @@
+/*
+ * 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.
+ */
+
+import { cssModules, Portal } from "../../bpk-react-utils";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkCloseButton from "../../bpk-component-close-button";
+import BpkDialogInner from "./BpkDialogInner";
+import { HEADER_ICON_TYPES } from "./common-types";
+import STYLES from "./BpkDialog.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkDialog = ({
+  children,
+  closeLabel = '',
+  dismissible = true,
+  headerIcon = null,
+  headerIconType = HEADER_ICON_TYPES.primary,
+  isOpen,
+  onClose = () => {},
+  renderTarget = () => null,
+  ...rest
+}) => {
+  const headerIconClassNames = getClassName('bpk-dialog__icon', `bpk-dialog__icon--${headerIconType}`);
+  const closeButtonClassNames = getClassName('bpk-dialog__close-button');
+  return /*#__PURE__*/_jsx(Portal, {
+    isOpen: isOpen,
+    onClose: onClose,
+    renderTarget: renderTarget,
+    closeOnEscPressed: dismissible,
+    children: /*#__PURE__*/_jsxs(BpkDialogInner, {
+      onClose: onClose,
+      closeOnScrimClick: dismissible,
+      containerClassName: getClassName('bpk-dialog__container'),
+      contentClassName: headerIcon ? getClassName('bpk-dialog--with-icon') : undefined,
+      ...rest,
+      children: [headerIcon && /*#__PURE__*/_jsx("div", {
+        className: headerIconClassNames,
+        children: headerIcon
+      }), dismissible && /*#__PURE__*/_jsx(BpkCloseButton, {
+        className: closeButtonClassNames,
+        label: closeLabel,
+        onClick: onClose
+      }), children]
+    })
+  });
+};
+export default BpkDialog;