@skyscanner/backpack-web 42.26.0 → 42.27.1

package/bpk-component-layout/src/BpkProvider.js

@@ -71,6 +71,19 @@ const FALLBACK_LOCALE_BY_DIRECTION = {
 // Intl.Locale.textInfo is unavailable (Node < 22, older browsers).
 const RTL_LANGUAGE_SUBTAGS = new Set(['ar', 'he', 'fa', 'ur', 'yi', 'iw', 'ps', 'sd', 'ug', 'ku']);
 
+// Returns true when `locale` is a BCP 47 string that Intl.Locale accepts.
+// Ark's LocaleProvider calls `new Intl.Locale(locale)` without a try/catch,
+// so any value we hand it must be validated here first or it throws
+// "Incorrect locale information provided".
+const isValidLocale = locale => {
+  try {
+    // Reading a property on the result (rather than bare `new`) satisfies the no-new lint rule.
+    return Boolean(new Intl.Locale(locale).baseName);
+  } catch {
+    return false;
+  }
+};
+
 // Returns the text direction implied by a BCP 47 locale string.
 // Uses Intl.Locale.textInfo when available (Chrome 99+, Safari 15.4+, Firefox 126+, Node 22+);
 // falls back to a known-RTL-subtag lookup.
@@ -88,11 +101,18 @@ const getLangDir = locale => {
 //
 // Priority rules:
 //   1. If html[dir] is explicitly set:
-//      - Use html[lang] only when its direction is consistent with html[dir].
+//      - Use html[lang] only when it is a valid locale AND its direction is
+//        consistent with html[dir].
 //      - Otherwise fall back to FALLBACK_LOCALE_BY_DIRECTION[dir].
 //      This prevents an LTR html[lang] (e.g. 'en' from a page template) from
 //      overriding an explicit html[dir]="rtl" signal (e.g. from a dev RTL toggle).
-//   2. If html[dir] is not set: use html[lang] if present, else 'en-US'.
+//   2. If html[dir] is not set: use html[lang] if it is a valid locale, else 'en-US'.
+//
+// Every value returned here is validated with isValidLocale() because Ark's
+// LocaleProvider passes it straight to `new Intl.Locale()`, which throws on
+// malformed input (e.g. '', '123', 'en_US'). An unvalidated value crashes the
+// provider, and when the ErrorBoundary fallback also mounts BpkProvider the same
+// bad value is re-read on every remount, producing an indefinite crash loop.
 //
 // SSR-safe: returns 'en-US' when document is unavailable.
 const getArkLocale = () => {
@@ -100,17 +120,12 @@ const getArkLocale = () => {
   const explicitDir = document.documentElement.getAttribute('dir');
   const lang = document.documentElement.getAttribute('lang');
   if (explicitDir === 'rtl' || explicitDir === 'ltr') {
-    if (lang && getLangDir(lang) === explicitDir) return lang;
-    return FALLBACK_LOCALE_BY_DIRECTION[explicitDir];
-  }
-  if (lang) {
-    try {
-      const locale = new Intl.Locale(lang);
-      if (locale) return lang;
-    } catch {
-      // Invalid locale string — fall through to default
+    if (lang && isValidLocale(lang) && getLangDir(lang) === explicitDir) {
+      return lang;
     }
+    return FALLBACK_LOCALE_BY_DIRECTION[explicitDir];
   }
+  if (lang && isValidLocale(lang)) return lang;
   return 'en-US';
 };
 

package/bpk-component-layout/src/types.d.ts

@@ -3,6 +3,19 @@ import type StackOptionKeys from './BpkStack.constant';
 import type { BpkCommonLayoutProps } from './commonProps';
 import type { BpkSpacingValue, BpkResponsiveValue, BpkBasisValue } from './tokens';
 import type { BoxProps, FlexProps, GridProps, GridItemProps, StackProps } from '@chakra-ui/react';
+/**
+ * Layout-level event props that should not be exposed on layout components.
+ * onClick is handled via BpkCommonLayoutProps; onFocus/onBlur are reintroduced
+ * on BpkBoxProps only.
+ */
+type LayoutEventProps = 'onMouseEnter' | 'onMouseLeave' | 'onMouseOver' | 'onMouseOut' | 'onMouseDown' | 'onMouseUp' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | 'onKeyPress';
+/**
+ * Shorthand props from the underlying layout system that we do NOT expose on
+ * Backpack layout components. These mostly mirror longer-form spacing,
+ * sizing and visual props that we already model explicitly via
+ * BpkCommonLayoutProps and BpkFlexGridProps.
+ */
+type DisallowedShorthandProps = 'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'm' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx' | 'my' | 'w' | 'h' | 'minW' | 'maxW' | 'minH' | 'maxH' | 'bg' | 'rounded' | 'shadow';
 /**
  * Flexbox & grid layout props that we explicitly support on Backpack layout
  * components. These are a curated subset of the underlying Box flex/grid API
@@ -66,10 +79,17 @@ type BpkBoxResponsiveLayoutProps = {
 };
 type BpkBoxResponsiveLayoutPropKeys = keyof BpkBoxResponsiveLayoutProps;
 /**
- * Component-specific props for BpkBox.
- * Explicit allowlist — does NOT inherit from Chakra BoxProps.
+ * Base type that removes common layout props, reserved props (className,
+ * children) and all layout-level event props from Chakra UI props.
+ *
+ * These will be replaced with Backpack-specific types.
+ */
+export type RemoveCommonProps<T> = Omit<T, keyof BpkCommonLayoutProps | 'className' | 'children' | LayoutEventProps | FlexGridPropKeys | DisallowedShorthandProps>;
+/**
+ * Component-specific props for BpkBox
+ * Includes all Box props except those in BpkCommonLayoutProps
  */
-export interface BpkBoxSpecificProps extends BpkBoxResponsiveLayoutProps, Omit<BpkFlexGridProps, BpkBoxResponsiveLayoutPropKeys> {
+export interface BpkBoxSpecificProps extends Omit<RemoveCommonProps<BoxProps>, BpkBoxResponsiveLayoutPropKeys>, BpkBoxResponsiveLayoutProps, Omit<BpkFlexGridProps, BpkBoxResponsiveLayoutPropKeys> {
 }
 /**
  * Props for BpkBox component
@@ -127,10 +147,10 @@ export type BpkVesselProps = {
     as?: VesselElement;
 } & HTMLAttributes<HTMLElement>;
 /**
- * Component-specific props for BpkFlex.
- * Explicit allowlist — does NOT inherit from Chakra FlexProps.
+ * Component-specific props for BpkFlex
+ * Includes all Flex props except those in BpkCommonLayoutProps
  */
-export interface BpkFlexSpecificProps {
+export interface BpkFlexSpecificProps extends RemoveCommonProps<FlexProps> {
     direction?: BpkResponsiveValue<FlexProps['flexDirection']>;
     justify?: BpkResponsiveValue<FlexProps['justifyContent']>;
     align?: BpkResponsiveValue<FlexProps['alignItems']>;
@@ -148,10 +168,10 @@ export interface BpkFlexProps extends BpkCommonLayoutProps, BpkFlexSpecificProps
     children?: ReactNode;
 }
 /**
- * Component-specific props for BpkGrid.
- * Explicit allowlist — does NOT inherit from Chakra GridProps.
+ * Component-specific props for BpkGrid
+ * Includes all Grid props except those in BpkCommonLayoutProps
  */
-export interface BpkGridSpecificProps {
+export interface BpkGridSpecificProps extends RemoveCommonProps<GridProps> {
     justify?: BpkResponsiveValue<GridProps['justifyContent']>;
     align?: BpkResponsiveValue<GridProps['alignItems']>;
     templateColumns?: BpkResponsiveValue<GridProps['gridTemplateColumns']>;
@@ -174,10 +194,10 @@ export interface BpkGridProps extends BpkCommonLayoutProps, BpkGridSpecificProps
     children?: ReactNode;
 }
 /**
- * Component-specific props for BpkGridItem.
- * Explicit allowlist — does NOT inherit from Chakra GridItemProps.
+ * Component-specific props for BpkGridItem
+ * Includes all GridItem props except those in BpkCommonLayoutProps
  */
-export interface BpkGridItemSpecificProps {
+export interface BpkGridItemSpecificProps extends RemoveCommonProps<GridItemProps> {
     area?: GridItemProps['area'];
     colEnd?: GridItemProps['colEnd'];
     colStart?: GridItemProps['colStart'];
@@ -201,17 +221,13 @@ type BpkStackOptions = {
     [K in StackOptionKeysType]?: K extends keyof StackProps ? BpkResponsiveValue<StackProps[K]> | StackProps[K] : never;
 };
 /**
- * Component-specific props for BpkStack.
- * Explicit allowlist — does NOT inherit from Chakra StackProps.
+ * Component-specific props for BpkStack
+ * Includes all Stack props except those in BpkCommonLayoutProps
  * Overrides StackOptions to support BpkResponsiveValue.
  * `alignItems` and `justifyContent` are accepted as semantic aliases for `align` and `justify`.
  * If both are provided, `align`/`justify` take precedence.
- *
- * `alignItems` and `justifyContent` are explicitly omitted from `BpkFlexGridProps` here so
- * that the responsive alias declarations below (which match BpkStackOptions) unambiguously
- * replace the non-responsive `BoxProps` variants from `BpkFlexGridProps`.
  */
-export interface BpkStackSpecificProps extends BpkStackOptions, Omit<BpkFlexGridProps, 'alignItems' | 'justifyContent'> {
+export interface BpkStackSpecificProps extends Omit<RemoveCommonProps<StackProps>, StackOptionKeysType>, BpkStackOptions, Omit<BpkFlexGridProps, 'alignItems' | 'justifyContent'> {
     /** Alias for `align`. Maps to CSS `align-items`. Responsive — replaces the non-responsive BpkFlexGridProps.alignItems. */
     alignItems?: BpkStackOptions['align'];
     /** Alias for `justify`. Maps to CSS `justify-content`. Responsive — replaces the non-responsive BpkFlexGridProps.justifyContent. */

package/package.json

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