@skyscanner/backpack-web 34.0.0-premajor.2 → 34.0.1

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

@@ -1,45 +1,24 @@
-/*
- * 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 { ReactNode } from 'react';
-import type {Props as DialogWrapperProps} from './BpkDialogWrapper';
-export type Props = Partial<DialogWrapperProps> & {
-  ariaLabelledby: string;
-  children: ReactNode;
-  closeOnEscPressed?: boolean;
-  closeOnScrimClick?: boolean;
-  dialogClassName?: string;
-  id: string | undefined;
-  isOpen: boolean;
-  onClose: (
-    arg0?: Event | KeyboardEvent | MouseEvent | PointerEvent | TouchEvent,
-    arg1?: {
-      source: 'ESCAPE' | 'DOCUMENT_CLICK';
-    },
-  ) => void | null;
-  exiting?: boolean;
-  transitionClassNames?: {
-    appear?: string,
-    appearActive?: string,
-    exit?: string
-  };
-  timeout?: {appear?: number, exit?: number};
+import type { SyntheticEvent, ReactNode } from "react";
+export interface Props {
+    ariaLabelledby: string;
+    children: ReactNode;
+    closeOnEscPressed?: boolean;
+    closeOnScrimClick?: boolean;
+    dialogClassName?: string;
+    id: string | undefined;
+    isOpen: boolean;
+    onClose: (arg0?: TouchEvent | MouseEvent | KeyboardEvent | SyntheticEvent<HTMLDialogElement, Event>, arg1?: {
+        source: 'ESCAPE' | 'DOCUMENT_CLICK';
+    }) => void | null;
+    exiting?: boolean;
+    transitionClassNames?: {
+        appear?: string;
+        appearActive?: string;
+        exit?: string;
+    };
+    timeout?: {
+        appear?: number;
+        exit?: number;
+    };
 }
-
-declare const BpkDialogWrapper: ({ariaLabelledby, children, closeOnEscPressed, closeOnScrimClick, dialogClassName, id, isOpen, onClose, exiting, transitionClassNames, timeout}: Props) => JSX.Element;
-export default BpkDialogWrapper;
+export declare const BpkDialogWrapper: (props: Props) => JSX.Element | null;

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

@@ -1,21 +1,3 @@
-/*
- * 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 { Component } from 'react';
 import type { ReactNode } from 'react';
 type InteractionEvents = TouchEvent | MouseEvent | KeyboardEvent;
@@ -32,7 +14,7 @@ type Props = {
     style: {} | null | undefined;
     renderTarget: null | HTMLElement | (() => null | HTMLElement);
     target: null | HTMLElement | JSX.Element | (() => HTMLElement);
-    targetRef: ((arg0: null | Element | Text | undefined) => void) | null | undefined;
+    targetRef: ((arg0: null | Element | undefined) => void) | null | undefined;
     closeOnEscPressed: boolean;
 };
 type State = {

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

@@ -1,21 +1,3 @@
-/*
- * 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 type { ReactNode } from 'react';
 type Props = {
     appearClassName: string;

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

@@ -1,21 +1,3 @@
-/*
- * 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.
- */
-
 declare const _default: (styles?: {
     [key: string]: any;
 }) => (...classNames: Array<string | boolean | number | {} | null | undefined>) => string;

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

@@ -1,21 +1,3 @@
-/*
- * 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.
- */
-
 declare const isDeviceIphone: () => boolean;
 declare const isDeviceIpad: () => boolean;
 declare const isDeviceIos: () => boolean;

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

@@ -1,20 +1,2 @@
-/*
- * 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.
- */
-
 declare const isRTL: () => boolean;
 export default isRTL;

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

@@ -1,21 +1,3 @@
-/*
- * 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 type { ReactNode, ComponentType } from 'react';
 type Props = {
     children?: ReactNode | string;

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

@@ -1,21 +1,3 @@
-/*
- * 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 type { ComponentType } from 'react';
 declare const wrapDisplayName: (Component: ComponentType<any> | string | null, hoc: string) => string;
 export default wrapDisplayName;

package/bpk-scrim-utils/index.d.ts

@@ -1,21 +1,3 @@
-/*
- * 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.
- */
-
 /// <reference types="react" />
 import withScrim from './src/withScrim';
 import withScrimmedPortal from './src/withScrimmedPortal';

package/bpk-scrim-utils/src/BpkScrim.d.ts

@@ -1,21 +1,3 @@
-/*
- * 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 type { SyntheticEvent } from 'react';
 type Props = {
     onClose?: (e?: SyntheticEvent) => void | null;

package/bpk-scrim-utils/src/scroll-utils.d.ts

@@ -1,21 +1,3 @@
-/*
- * 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.
- */
-
 export declare const storeScroll: () => void;
 export declare const restoreScroll: () => void;
 export declare const fixBody: () => void;

package/bpk-scrim-utils/src/withScrim.d.ts

@@ -1,32 +1,26 @@
-/*
- * 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 type { ComponentType } from 'react';
 export type Props = {
+    /**
+     * The `pagewrap` element id is a convention we use internally at Skyscanner. In most cases it should "just work".
+     */
     getApplicationElement: () => HTMLElement | null;
+    /**
+     * This is required unless `closeOnScrimClick` is false. It should be set as the `onClick` action on a button or a link.
+     */
     onClose?: () => void | null;
+    /**
+     * Can be used to apply iPhone only styles or behaviour, as it has different scrolling behaviour
+     */
     isIphone?: boolean;
     isIpad?: boolean;
+    /**
+     * It can be used to apply styles to the full-screen container into which the enriched component is inserted (e.g. `display: flex` or `display: grid`)
+     */
     containerClassName?: string;
     closeOnScrimClick?: boolean;
     [rest: string]: any;
 };
-declare const withScrim: <P extends object>(WrappedComponent: string | ComponentType<P>) => {
+declare const withScrim: <P extends object>(WrappedComponent: ComponentType<P> | string) => {
     new (props: (Props & Omit<P, "dialogRef">) | Readonly<Props & Omit<P, "dialogRef">>): {
         dialogElement?: HTMLElement | null | undefined;
         componentDidMount(): void;

package/bpk-scrim-utils/src/withScrimmedPortal.d.ts

@@ -1,25 +1,7 @@
-/*
- * 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 type { ComponentType } from 'react';
 import type { Props as ScrimProps } from './withScrim';
-type Props = ScrimProps & {
+export type Props = ScrimProps & {
     renderTarget?: (() => HTMLElement | null) | null;
 };
-declare const withScrimmedPortal: (WrappedComponent: ComponentType<ScrimProps>) => ({ renderTarget, ...rest }: Props) => import("react").ReactPortal;
+declare const withScrimmedPortal: (WrappedComponent: ComponentType<ScrimProps>) => ({ renderTarget, ...rest }: Props) => JSX.Element;
 export default withScrimmedPortal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "34.0.0-premajor.2",
+  "version": "34.0.1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -24,9 +24,10 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.12",
     "@popperjs/core": "^2.11.8",
+    "@radix-ui/react-slider": "^1.1.2",
     "@react-google-maps/api": "^2.12.0",
-    "@skyscanner/bpk-foundations-web": "^17.9.0",
-    "@skyscanner/bpk-svgs": "^19.1.0",
+    "@skyscanner/bpk-foundations-web": "^17.11.0",
+    "@skyscanner/bpk-svgs": "^19.3.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
     "d3-path": "^2.0.0",
@@ -40,7 +41,6 @@
     "object-assign": "^4.1.1",
     "prop-types": "^15.7.2",
     "react-autosuggest": "^9.4.3",
-    "react-slider": "^2.0.6",
     "react-table": "^7.8.0",
     "react-virtualized-auto-sizer": "1.0.20",
     "react-window": "^1.8.7"

package/unstable__bpk-mixins/_forms.scss

@@ -188,11 +188,27 @@
   right: tokens.bpk-spacing-md();
   height: tokens.$bpk-input-height;
 
+  // remove any default button styling
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: tokens.$bpk-text-secondary-day;
+  cursor: pointer;
+  appearance: none; // hidden by default
+
   @include utils.bpk-rtl {
     right: inherit;
     left: tokens.bpk-spacing-md();
   }
 
+  @include utils.bpk-hover {
+    color: tokens.$bpk-text-primary-day;
+  }
+
+  &:active {
+    color: tokens.$bpk-text-primary-day;
+  }
+
   &--large {
     right: tokens.bpk-spacing-base();
     height: tokens.$bpk-input-large-height;

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

@@ -1,56 +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.
- */
-
-export declare const formatDateFull: (date: Date) => string;
-export declare const formatDateFullArabic: (date: Date) => string;
-export declare const formatDateFullJapanese: (date: Date) => string;
-export declare const formatMonth: (date: Date) => string;
-export declare const formatMonthArabic: (date: Date) => string;
-export declare const formatMonthJapanese: (date: Date) => string;
-export declare const weekDays: {
-    name: string;
-    nameAbbr: string;
-    nameNarrow: string;
-    index: number;
-    isWeekend: boolean;
-}[];
-export declare const weekDaysMoreWeekend: {
-    name: string;
-    nameAbbr: string;
-    nameNarrow: string;
-    index: number;
-    isWeekend: boolean;
-}[];
-export declare const weekDaysArabic: {
-    name: string;
-    nameAbbr: string;
-    nameShort: string;
-    nameNarrow: string;
-    index: number;
-    cldrKey: string;
-    isWeekend: boolean;
-}[];
-export declare const weekDaysJapanese: {
-    name: string;
-    nameAbbr: string;
-    nameShort: string;
-    nameNarrow: string;
-    index: number;
-    cldrKey: string;
-    isWeekend: boolean;
-}[];

package/bpk-component-flare/src/__generated__/corner-radius.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare const _default: ({ styles, ...props }: {
-    [x: string]: any;
-    styles?: {} | undefined;
-}) => JSX.Element;
-export default _default;

package/bpk-component-flare/src/__generated__/pointer.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare const _default: ({ styles, ...props }: {
-    [x: string]: any;
-    styles?: {} | undefined;
-}) => JSX.Element;
-export default _default;

package/bpk-component-input/src/BpkClearButton.js

@@ -1,53 +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.
- */
-
-import { withButtonAlignment } from "../../bpk-component-icon";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import ClearIcon from "../../bpk-component-icon/sm/close-circle";
-import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkClearButton.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
-const ClearButtonIcon = withButtonAlignment(ClearIcon);
-const BpkClearButton = ({
-  className,
-  label,
-  onClick,
-  ...rest
-}) => {
-  const classNames = [getClassName('bpk-clear-button')];
-  if (className) {
-    classNames.push(className);
-  }
-  return /*#__PURE__*/_jsx("button", {
-    type: "button",
-    title: label,
-    onClick: onClick,
-    "aria-label": label,
-    className: classNames.join(' '),
-    ...rest,
-    children: /*#__PURE__*/_jsx(ClearButtonIcon, {
-      focusable: "false" // prevents focus on IE11
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      ,
-      className: getClassName('bpk-clear-button__icon')
-    })
-  });
-};
-export default BpkClearButton;

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.module.css

@@ -1,18 +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.
- */
-.bpk-navigation-bar-button-link{color:#161616;color:var(--bpk-navigation-bar-button-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-navigation-bar-button-link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-button-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-navigation-bar-button-link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-button-link-hover-color, rgb(22, 22, 22))}.bpk-navigation-bar-button-link:active{color:#161616;color:var(--bpk-navigation-bar-button-link-active-color, rgb(22, 22, 22))}.bpk-navigation-bar-button-link:visited{color:#161616;color:var(--bpk-navigation-bar-button-link-visited-color, rgb(22, 22, 22))}.bpk-navigation-bar-button-link--on-dark{color:#fff}.bpk-no-touch-support .bpk-navigation-bar-button-link--on-dark:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-navigation-bar-button-link--on-dark:hover:not(:active):not(:disabled){color:#fff}.bpk-navigation-bar-button-link--on-dark:active{color:#fff}.bpk-navigation-bar-button-link--on-dark:visited{color:#fff}