@skyscanner/backpack-web 42.26.0-dev-v27664212356.1 → 42.27.0

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

@@ -1,4 +1,4 @@
-export { BpkProvider, BpkEmotionCacheContext } from './src/BpkProvider';
+export { BpkProvider } from './src/BpkProvider';
 export { BpkBox } from './src/BpkBox';
 export { BpkVessel } from './src/BpkVessel';
 export { BpkFlex } from './src/BpkFlex';

package/bpk-component-layout/index.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-export { BpkProvider, BpkEmotionCacheContext } from "./src/BpkProvider";
+export { BpkProvider } from "./src/BpkProvider";
 export { BpkBox } from "./src/BpkBox";
 export { BpkVessel } from "./src/BpkVessel";
 export { BpkFlex } from "./src/BpkFlex";

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

@@ -1,14 +1,11 @@
-import type { ReactNode, ReactElement } from 'react';
-import type { EmotionCache } from '@emotion/cache';
+import type { ReactElement, ReactNode } from 'react';
 export interface BpkProviderProps {
     children: ReactNode;
 }
-export declare const BpkEmotionCacheContext: import("react").Context<EmotionCache | null>;
 /**
  * BpkProvider - Provides context for Backpack layout and Ark-based components.
  *
  * Wraps children with:
- * - Emotion CacheProvider (own cache, or external cache injected via BpkEmotionCacheContext)
  * - Chakra UI system context (for layout components: BpkFlex, BpkGrid, etc.)
  * - Ark UI LocaleProvider (for Ark-based components: BpkCheckboxV2, BpkSegmentedControlV2, etc.)
  *
@@ -16,11 +13,6 @@ export declare const BpkEmotionCacheContext: import("react").Context<EmotionCach
  * the appropriate locale to Ark's LocaleProvider. All Ark-based components in the
  * tree render correctly in RTL without requiring additional wrapping or prop changes.
  *
- * External cache injection: host apps can supply an Emotion cache via
- * BpkEmotionCacheContext. When a non-null value is provided, BpkProvider uses it
- * directly and skips creating its own cache. This allows the host to swap in a
- * fresh cache after a hydration error so all Backpack styles are re-injected.
- *
  * @param {BpkProviderProps} props - The provider props.
  * @returns {ReactElement} The provider wrapping its children with Chakra and Ark context.
  */

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

@@ -23,12 +23,6 @@ import createCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
 import { createBpkConfig } from "./theme";
 import { jsx as _jsx } from "react/jsx-runtime";
-// Exported so host apps can inject an externally-managed Emotion cache into
-// BpkProvider (e.g. to force re-injection after a hydration error recovery).
-// When a non-null value is provided via this context, BpkProvider operates in
-// "nested" mode: it skips creating its own cache and delegates to the external one.
-export const BpkEmotionCacheContext = /*#__PURE__*/createContext(null);
-
 /**
  * Creates a Chakra UI system with Backpack token mappings.
  *
@@ -43,14 +37,6 @@ const bpkSystem = createSystem(defaultBaseConfig, createBpkConfig());
 // Force speedy:false + recreate after mount in Cypress. Remove once Emotion /
 // React Router 7 provide a cleaner hydration story. Ported from hotels-website#12025.
 
-// `'css'` is shared with Chakra v3's internal key on purpose — keeps this
-// boundary in front of Chakra's auto-created cache.
-const createBpkEmotionCache = speedy => createCache(speedy === undefined ? {
-  key: 'css'
-} : {
-  key: 'css',
-  speedy
-});
 const isCypressEnv = () => {
   if (typeof window === 'undefined') return false;
   const win = window;
@@ -63,6 +49,16 @@ const isCypressEnv = () => {
     return false; // cross-origin parent frame
   }
 };
+
+// `'css'` is shared with Chakra v3's internal key on purpose — keeps this
+// boundary in front of Chakra's auto-created cache.
+const createBpkEmotionCache = speedy => createCache(speedy === undefined ? {
+  key: 'css'
+} : {
+  key: 'css',
+  speedy
+});
+const BpkEmotionCacheContext = /*#__PURE__*/createContext(null);
 // Fallback locale mapping used when no explicit locale is available on the document.
 // Maps DOM direction to minimal BCP 47 locales understood by Ark's isRTL() utility.
 // 'ar-SA' is the minimal RTL locale — Ark only uses it to derive dir='rtl'.
@@ -142,7 +138,6 @@ const useArkLocale = () => {
  * BpkProvider - Provides context for Backpack layout and Ark-based components.
  *
  * Wraps children with:
- * - Emotion CacheProvider (own cache, or external cache injected via BpkEmotionCacheContext)
  * - Chakra UI system context (for layout components: BpkFlex, BpkGrid, etc.)
  * - Ark UI LocaleProvider (for Ark-based components: BpkCheckboxV2, BpkSegmentedControlV2, etc.)
  *
@@ -150,21 +145,16 @@ const useArkLocale = () => {
  * the appropriate locale to Ark's LocaleProvider. All Ark-based components in the
  * tree render correctly in RTL without requiring additional wrapping or prop changes.
  *
- * External cache injection: host apps can supply an Emotion cache via
- * BpkEmotionCacheContext. When a non-null value is provided, BpkProvider uses it
- * directly and skips creating its own cache. This allows the host to swap in a
- * fresh cache after a hydration error so all Backpack styles are re-injected.
- *
  * @param {BpkProviderProps} props - The provider props.
  * @returns {ReactElement} The provider wrapping its children with Chakra and Ark context.
  */
 export const BpkProvider = ({
   children
 }) => {
-  const externalCache = useContext(BpkEmotionCacheContext);
-  const isNested = externalCache !== null;
+  const parentCache = useContext(BpkEmotionCacheContext);
+  const isNested = parentCache !== null;
   const [isCypress] = useState(isCypressEnv);
-  const [ownCache, setOwnCache] = useState(() => isNested ? externalCache : createBpkEmotionCache(isCypress ? false : undefined));
+  const [ownCache, setOwnCache] = useState(() => isNested ? parentCache : createBpkEmotionCache(isCypress ? false : undefined));
   const hasRecreated = useRef(false);
   const locale = useArkLocale();
 
@@ -178,13 +168,6 @@ export const BpkProvider = ({
     setOwnCache(createBpkEmotionCache(false));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-
-  // NOTE: if externalCache changes from non-null to null at runtime, ownCache
-  // will still hold the value it was initialised with (the old external cache).
-  // This is intentional: BpkEmotionCacheContext.Provider is expected to be
-  // mounted for the lifetime of the app once set — toggling it off is not a
-  // supported use case. The state initialiser runs only once per mount.
-  const activeCache = isNested ? externalCache : ownCache;
   const inner = /*#__PURE__*/_jsx(ChakraProvider, {
     value: bpkSystem,
     children: /*#__PURE__*/_jsx(LocaleProvider, {
@@ -192,10 +175,13 @@ export const BpkProvider = ({
       children: children
     })
   });
+  if (isNested) {
+    return inner;
+  }
   return /*#__PURE__*/_jsx(BpkEmotionCacheContext.Provider, {
-    value: activeCache,
+    value: ownCache,
     children: /*#__PURE__*/_jsx(CacheProvider, {
-      value: activeCache,
+      value: ownCache,
       children: inner
     })
   });

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-dev-v27664212356.1",
+  "version": "42.27.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",