@skyscanner/backpack-web 41.3.0 → 41.4.0

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{display:flex;overflow-x:hidden;box-sizing:border-box;gap:.25rem;margin-block:-1.5rem;padding-block:1.5rem;scroll-snap-stop:always;scroll-snap-type:x mandatory;scrollbar-width:none}@media(max-width: 32rem){.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{overflow-x:scroll}}.bpk-card-list-row-rail__row::-webkit-scrollbar,.bpk-card-list-row-rail__rail::-webkit-scrollbar{display:none}.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{position:relative;padding:0 .5rem;flex:0 0 calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/var(--initially-shown-cards, 3));overflow:visible;box-sizing:border-box;scroll-snap-align:start}@media(max-width: 32rem){.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{flex:0 0 calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/max(1,var(--initially-shown-cards, 3) - .8))}.bpk-card-list-row-rail__row__card:first-child,.bpk-card-list-row-rail__rail__card:first-child{padding-left:.25rem}html[dir=rtl] .bpk-card-list-row-rail__row__card:first-child,html[dir=rtl] .bpk-card-list-row-rail__rail__card:first-child{padding-right:.25rem;padding-left:.5rem}}.bpk-card-list-row-rail__rail{-webkit-overflow-scrolling:touch}
+.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{display:flex;overflow-x:hidden;box-sizing:border-box;gap:.25rem;margin-inline:-0.5rem;scroll-snap-stop:always;scroll-snap-type:x mandatory;scrollbar-width:none}@media(max-width: 32rem){.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{overflow-x:scroll}}.bpk-card-list-row-rail__row::-webkit-scrollbar,.bpk-card-list-row-rail__rail::-webkit-scrollbar{display:none}.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{position:relative;padding:0 .5rem;flex:0 0 calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/var(--initially-shown-cards, 3));overflow:visible;box-sizing:border-box;scroll-snap-align:start}@media(max-width: 32rem){.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{flex-basis:calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/max(1,var(--initially-shown-cards, 3) - .8))}}.bpk-card-list-row-rail__row__card{flex-basis:calc((100% - .25rem*(var(--initially-shown-cards, 3) - 1))/var(--initially-shown-cards, 3))}.bpk-card-list-row-rail__rail{-webkit-overflow-scrolling:touch}

package/bpk-component-code/index.d.ts

@@ -0,0 +1,6 @@
+import BpkCode from './src/BpkCode';
+import BpkCodeBlock from './src/BpkCodeBlock';
+import type { Props as BpkCodeProps } from './src/BpkCode';
+import type { Props as BpkCodeBlockProps } from './src/BpkCodeBlock';
+export type { BpkCodeProps, BpkCodeBlockProps };
+export { BpkCode, BpkCodeBlock };

package/bpk-component-code/index.js

@@ -14,6 +14,8 @@
  * 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 BpkCode from "./src/BpkCode";
+ */
+
+import BpkCode from "./src/BpkCode";
 import BpkCodeBlock from "./src/BpkCodeBlock";
 export { BpkCode, BpkCodeBlock };

package/bpk-component-code/src/BpkCode.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export type Props = {
+    children: ReactNode;
+    alternate?: boolean;
+    className?: string;
+    [rest: string]: any;
+};
+declare const BpkCode: ({ alternate, children, className, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkCode;

package/bpk-component-code/src/BpkCode.js

@@ -14,42 +14,23 @@
  * 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 PropTypes from 'prop-types';
+ */
+
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkCode.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkCode = props => {
-  const {
-    alternate,
-    children,
-    className,
-    ...rest
-  } = props;
-  const classNames = [getClassName('bpk-code')];
-  if (alternate) {
-    classNames.push(getClassName('bpk-code--alternate'));
-  }
-  if (className) {
-    classNames.push(className);
-  }
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx("code", {
-      className: classNames.join(' '),
-      ...rest,
-      children: children
-    })
-  );
-};
-BpkCode.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  alternate: PropTypes.bool
-};
-BpkCode.defaultProps = {
-  className: null,
-  alternate: false
+const BpkCode = ({
+  alternate = false,
+  children,
+  className,
+  ...rest
+}) => {
+  const classNames = getClassName('bpk-code', alternate && 'bpk-code--alternate', className);
+  return /*#__PURE__*/_jsx("code", {
+    className: classNames,
+    ...rest,
+    children: children
+  });
 };
 export default BpkCode;

package/bpk-component-code/src/BpkCodeBlock.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export type Props = {
+    children: ReactNode;
+    alternate?: boolean;
+    className?: string;
+    [rest: string]: any;
+};
+declare const BpkCodeBlock: ({ alternate, children, className, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkCodeBlock;

package/bpk-component-code/src/BpkCodeBlock.js

@@ -14,40 +14,27 @@
  * 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 PropTypes from 'prop-types';
+ */
+
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkCodeBlock.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkCodeBlock = props => {
-  const {
-    alternate,
-    children,
-    className,
-    ...rest
-  } = props;
+const BpkCodeBlock = ({
+  alternate = false,
+  children,
+  className,
+  ...rest
+}) => {
   const preClassNames = getClassName('bpk-code__pre', alternate && 'bpk-code__pre--alternate', className);
   const codeClassNames = getClassName('bpk-code', 'bpk-code--block');
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx("pre", {
-      className: preClassNames,
-      ...rest,
-      children: /*#__PURE__*/_jsx("code", {
-        className: codeClassNames,
-        children: children
-      })
+  return /*#__PURE__*/_jsx("pre", {
+    className: preClassNames,
+    ...rest,
+    children: /*#__PURE__*/_jsx("code", {
+      className: codeClassNames,
+      children: children
     })
-  );
-};
-BpkCodeBlock.propTypes = {
-  children: PropTypes.node.isRequired,
-  alternate: PropTypes.bool,
-  className: PropTypes.string
-};
-BpkCodeBlock.defaultProps = {
-  alternate: false,
-  className: null
+  });
 };
 export default BpkCodeBlock;

package/bpk-component-theme-toggle/index.d.ts

@@ -0,0 +1,4 @@
+import BpkThemeToggle from './src/BpkThemeToggle';
+import updateOnThemeChange from './src/updateOnThemeChange';
+export default BpkThemeToggle;
+export { updateOnThemeChange };

package/bpk-component-theme-toggle/src/BpkThemeToggle.d.ts

@@ -0,0 +1,16 @@
+import type { ChangeEvent } from 'react';
+import { Component } from 'react';
+type Props = Record<string, never>;
+type State = {
+    selectedTheme: string;
+};
+declare class BpkThemeToggle extends Component<Props, State> {
+    constructor(props: Props);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    handleChange: (e: ChangeEvent<HTMLSelectElement>) => void;
+    cycleTheme: () => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default BpkThemeToggle;

package/bpk-component-theme-toggle/src/BpkThemeToggle.js

@@ -17,7 +17,10 @@
  */
 
 import { Component } from 'react';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkLabel from "../../bpk-component-label";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkSelect from "../../bpk-component-select";
 import { cssModules } from "../../bpk-react-utils";
 import bpkCustomThemes from "./theming";
@@ -29,11 +32,13 @@ const getClassName = cssModules(STYLES);
 const availableThemes = Object.keys(bpkCustomThemes);
 const setTheme = theme => {
   const htmlElement = getHtmlElement();
-  htmlElement.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, {
-    detail: {
-      theme
-    }
-  }));
+  if (htmlElement) {
+    htmlElement.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, {
+      detail: {
+        theme
+      }
+    }));
+  }
 };
 class BpkThemeToggle extends Component {
   constructor(props) {
@@ -58,7 +63,7 @@ class BpkThemeToggle extends Component {
     this.setState({
       selectedTheme
     });
-    setTheme(bpkCustomThemes[selectedTheme]);
+    setTheme(selectedTheme ? bpkCustomThemes[selectedTheme] : undefined);
   };
   cycleTheme = () => {
     let {
@@ -73,7 +78,7 @@ class BpkThemeToggle extends Component {
     this.setState({
       selectedTheme
     });
-    setTheme(bpkCustomThemes[selectedTheme]);
+    setTheme(selectedTheme ? bpkCustomThemes[selectedTheme] : undefined);
   };
   render() {
     const {

package/bpk-component-theme-toggle/src/theming.d.ts

@@ -0,0 +1,136 @@
+export type Theme = {
+    themeName: string;
+    primaryColor: string;
+    logoFillColor: string;
+    accordionActiveColor: string;
+    accordionColor: string;
+    accordionHoverColor: string;
+    badgeBackgroundColor: string;
+    badgeSuccessBackgroundColor: string;
+    badgeDestructiveBackgroundColor: string;
+    bannerAlertPrimaryColor: string;
+    bannerAlertSuccessColor: string;
+    bannerAlertWarnColor: string;
+    bannerAlertErrorColor: string;
+    barchartBarBackgroundColor: string;
+    barchartBarHoverBackgroundColor: string;
+    barchartBarActiveBackgroundColor: string;
+    barchartBarSelectedBackgroundColor: string;
+    blockquoteBarColor: string;
+    buttonFontSize: string;
+    buttonPrimaryTextColor: string;
+    buttonPrimaryHoverTextColor: string;
+    buttonPrimaryActiveTextColor: string;
+    buttonPrimaryGradientStartColor: string;
+    buttonPrimaryGradientEndColor: string;
+    buttonPrimaryBackgroundColor: string;
+    buttonPrimaryHoverBackgroundColor: string;
+    buttonPrimaryActiveBackgroundColor: string;
+    buttonSecondaryTextColor: string;
+    buttonSecondaryHoverTextColor: string;
+    buttonSecondaryActiveTextColor: string;
+    buttonSecondaryBorderColor: string;
+    buttonSecondaryHoverBorderColor: string;
+    buttonSecondaryActiveBorderColor: string;
+    buttonSecondaryBackgroundColor: string;
+    buttonSecondaryHoverBackgroundColor: string;
+    buttonSecondaryActiveBackgroundColor: string;
+    buttonFeaturedTextColor: string;
+    buttonFeaturedHoverTextColor: string;
+    buttonFeaturedActiveTextColor: string;
+    buttonFeaturedGradientStartColor: string;
+    buttonFeaturedGradientEndColor: string;
+    buttonFeaturedBackgroundColor: string;
+    buttonFeaturedHoverBackgroundColor: string;
+    buttonFeaturedActiveBackgroundColor: string;
+    buttonDestructiveTextColor: string;
+    buttonDestructiveHoverTextColor: string;
+    buttonDestructiveActiveTextColor: string;
+    buttonDestructiveBorderColor: string;
+    buttonDestructiveHoverBorderColor: string;
+    buttonDestructiveActiveBorderColor: string;
+    buttonDestructiveBackgroundColor: string;
+    buttonDestructiveHoverBackgroundColor: string;
+    buttonDestructiveActiveBackgroundColor: string;
+    chipDefaultSelectedBackgroundColor: string;
+    chipDefaultSelectedTextColor: string;
+    chipOnDarkSelectedBackgroundColor: string;
+    chipOnDarkSelectedTextColor: string;
+    chipOnImageSelectedBackgroundColor: string;
+    chipOnImageSelectedHoverBackgroundColor: string;
+    chipOnImageSelectedActiveBackgroundColor: string;
+    chipOnImageSelectedTextColor: string;
+    fieldsetLabelTextColor: string;
+    formValidationIconFill: string;
+    formValidationTextColor: string;
+    inputInvalidBorderColor: string;
+    linkColor: string;
+    linkHoverColor: string;
+    linkActiveColor: string;
+    linkVisitedColor: string;
+    linkAlternateColor: string;
+    linkAlternateHoverColor: string;
+    linkAlternateActiveColor: string;
+    linkAlternateVisitedColor: string;
+    horizontalNavBarSelectedColor: string;
+    horizontalNavLinkSelectedColor: string;
+    horizontalNavLinkColor: string;
+    horizontalNavLinkHoverColor: string;
+    horizontalNavLinkActiveColor: string;
+    selectInvalidBorderColor: string;
+    spinnerPrimaryColor: string;
+    starRatingFilledColor: string;
+    sliderBarColor: string;
+    textareaInvalidBorderColor: string;
+    paginationNudgerActiveColor: string;
+    paginationNudgerColor: string;
+    paginationNudgerHoverColor: string;
+    paginationSelectedBackgroundColor: string;
+    progressBarFillColor: string;
+    calendarDateTextColor: string;
+    calendarDateTextHoverColor: string;
+    calendarDateTextActiveColor: string;
+    calendarDateTextFocusColor: string;
+    calendarDateTextSelectedColor: string;
+    calendarDateSelectedBackgroundColor: string;
+    calendarDateFocusedBorderColor: string;
+    calendarNudgerIconColor: string;
+    calendarNudgerIconHoverColor: string;
+    calendarNudgerIconActiveColor: string;
+    checkboxCheckedColor: string;
+    radioCheckedColor: string;
+    switchCheckedColor: string;
+    ratingHighTextColor: string;
+    ratingHighColor: string;
+    ratingMediumTextColor: string;
+    ratingMediumColor: string;
+    ratingLowColor: string;
+    iconMarkerDefaultBackgroundColor: string;
+    iconMarkerDefaultSelectedColor: string;
+    iconMarkerDefaultDisabledColor: string;
+    iconMarkerDefaultDisabledBackgroundColor: string;
+    priceMarkerBackgroundColor: string;
+    priceMarkerSelectedBorderColor: string;
+    priceMarkerSelectedColor: string;
+    priceMarkerViewedBackgroundColor: string;
+    priceMarkerViewedBorderColor: string;
+    priceMarkerViewedColor: string;
+    skipLinkBackgroundColor: string;
+    navigationBarIconButtonColor: string;
+    navigationBarIconButtonHoverColor: string;
+    navigationBarIconButtonActiveColor: string;
+    navigationBarButtonLinkColor: string;
+    navigationBarButtonLinkHoverColor: string;
+    navigationBarButtonLinkActiveColor: string;
+    navigationBarButtonLinkVisitedColor: string;
+    navigationBarTitleColor: string;
+    navigationBarBackgroundColor: string;
+    docsSidebarBackground: string;
+    docsSidebarLink: string;
+    docsSidebarLinkBorder: string;
+    docsSidebarSelectedArrowColor: string;
+};
+declare const bpkCustomThemes: {
+    [key: string]: Theme;
+};
+export default bpkCustomThemes;

package/bpk-component-theme-toggle/src/updateOnThemeChange.d.ts

@@ -0,0 +1,42 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { Theme } from './theming';
+type ThemeChangeEvent = CustomEvent<{
+    theme: Theme | null;
+}>;
+type UpdateOnThemeChangeProps = {
+    children: ReactNode;
+};
+type UpdateOnThemeChangeState = {
+    theme: Theme | null;
+};
+declare const updateOnThemeChange: <P extends object>(EnhancedComponent: ComponentType<P & {
+    theme: Theme | null;
+}>) => {
+    new (props: P & UpdateOnThemeChangeProps): {
+        componentDidMount(): void;
+        componentWillUnmount(): void;
+        onThemeChange: (e: ThemeChangeEvent) => void;
+        render(): import("react/jsx-runtime").JSX.Element;
+        context: unknown;
+        setState<K extends "theme">(state: UpdateOnThemeChangeState | ((prevState: Readonly<UpdateOnThemeChangeState>, props: Readonly<P & UpdateOnThemeChangeProps>) => UpdateOnThemeChangeState | Pick<UpdateOnThemeChangeState, K> | null) | Pick<UpdateOnThemeChangeState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<P & UpdateOnThemeChangeProps>;
+        state: Readonly<UpdateOnThemeChangeState>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<P & UpdateOnThemeChangeProps>, nextState: Readonly<UpdateOnThemeChangeState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P & UpdateOnThemeChangeProps>, prevState: Readonly<UpdateOnThemeChangeState>): any;
+        componentDidUpdate?(prevProps: Readonly<P & UpdateOnThemeChangeProps>, prevState: Readonly<UpdateOnThemeChangeState>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P & UpdateOnThemeChangeProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & UpdateOnThemeChangeProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P & UpdateOnThemeChangeProps>, nextState: Readonly<UpdateOnThemeChangeState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P & UpdateOnThemeChangeProps>, nextState: Readonly<UpdateOnThemeChangeState>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType?: import("react").Context<any> | undefined;
+};
+export default updateOnThemeChange;

package/bpk-component-theme-toggle/src/updateOnThemeChange.js

@@ -16,24 +16,29 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
 import { Component } from 'react';
 import { wrapDisplayName } from "../../bpk-react-utils";
 import { getHtmlElement, THEME_CHANGE_EVENT } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 const updateOnThemeChange = EnhancedComponent => {
   class UpdateOnThemeChange extends Component {
-    constructor() {
-      super();
+    constructor(props) {
+      super(props);
       this.state = {
         theme: null
       };
     }
     componentDidMount() {
-      getHtmlElement().addEventListener(THEME_CHANGE_EVENT, this.onThemeChange, false);
+      const htmlElement = getHtmlElement();
+      if (htmlElement) {
+        htmlElement.addEventListener(THEME_CHANGE_EVENT, this.onThemeChange, false);
+      }
     }
     componentWillUnmount() {
-      getHtmlElement().removeEventListener(THEME_CHANGE_EVENT, this.onThemeChange, false);
+      const htmlElement = getHtmlElement();
+      if (htmlElement) {
+        htmlElement.removeEventListener(THEME_CHANGE_EVENT, this.onThemeChange, false);
+      }
     }
     onThemeChange = e => {
       const {
@@ -52,9 +57,6 @@ const updateOnThemeChange = EnhancedComponent => {
     }
   }
   UpdateOnThemeChange.displayName = wrapDisplayName(EnhancedComponent, 'updateOnThemeChange');
-  UpdateOnThemeChange.propTypes = {
-    children: PropTypes.node.isRequired
-  };
   return UpdateOnThemeChange;
 };
 export default updateOnThemeChange;

package/bpk-component-theme-toggle/src/utils.d.ts

@@ -0,0 +1,3 @@
+declare const THEME_CHANGE_EVENT = "bpkchangetheme";
+declare const getHtmlElement: () => HTMLElement | null;
+export { THEME_CHANGE_EVENT, getHtmlElement };

package/bpk-component-theme-toggle/src/utils.js

@@ -16,5 +16,5 @@
  * limitations under the License.
  */
 const THEME_CHANGE_EVENT = 'bpkchangetheme';
-const getHtmlElement = () => typeof document !== 'undefined' ? document.querySelector('html') : {};
+const getHtmlElement = () => typeof document !== 'undefined' ? document.querySelector('html') : null;
 export { THEME_CHANGE_EVENT, getHtmlElement };

package/package.json

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