@skyscanner/backpack-web 42.20.2 → 42.21.1

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

@@ -24,12 +24,26 @@ import STYLES from "./BpkLayout.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 export const BpkStack = /*#__PURE__*/forwardRef(({
+  align,
+  alignItems,
   backgroundColor,
   children,
   color,
+  justify,
+  justifyContent,
   ...props
 }, ref) => {
-  const processedProps = processBpkComponentProps(props, {
+  const resolvedAlign = align ?? alignItems;
+  const resolvedJustify = justify ?? justifyContent;
+  const processedProps = processBpkComponentProps({
+    ...props,
+    ...(resolvedAlign !== undefined && {
+      align: resolvedAlign
+    }),
+    ...(resolvedJustify !== undefined && {
+      justify: resolvedJustify
+    })
+  }, {
     component: 'BpkStack'
   });
   const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
@@ -47,12 +61,26 @@ export const BpkStack = /*#__PURE__*/forwardRef(({
 });
 BpkStack.displayName = 'BpkStack';
 export const BpkHStack = /*#__PURE__*/forwardRef(({
+  align,
+  alignItems,
   backgroundColor,
   children,
   color,
+  justify,
+  justifyContent,
   ...props
 }, ref) => {
-  const processedProps = processBpkComponentProps(props, {
+  const resolvedAlign = align ?? alignItems;
+  const resolvedJustify = justify ?? justifyContent;
+  const processedProps = processBpkComponentProps({
+    ...props,
+    ...(resolvedAlign !== undefined && {
+      align: resolvedAlign
+    }),
+    ...(resolvedJustify !== undefined && {
+      justify: resolvedJustify
+    })
+  }, {
     component: 'BpkStack'
   });
   const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;
@@ -70,12 +98,26 @@ export const BpkHStack = /*#__PURE__*/forwardRef(({
 });
 BpkHStack.displayName = 'BpkHStack';
 export const BpkVStack = /*#__PURE__*/forwardRef(({
+  align,
+  alignItems,
   backgroundColor,
   children,
   color,
+  justify,
+  justifyContent,
   ...props
 }, ref) => {
-  const processedProps = processBpkComponentProps(props, {
+  const resolvedAlign = align ?? alignItems;
+  const resolvedJustify = justify ?? justifyContent;
+  const processedProps = processBpkComponentProps({
+    ...props,
+    ...(resolvedAlign !== undefined && {
+      align: resolvedAlign
+    }),
+    ...(resolvedJustify !== undefined && {
+      justify: resolvedJustify
+    })
+  }, {
     component: 'BpkStack'
   });
   const classNames = color || backgroundColor ? getClassName('bpk-layout', color ? `bpk-layout--${color}` : '', backgroundColor ? `bpk-layout--${backgroundColor}` : '') : undefined;

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

@@ -1,4 +1,4 @@
-import type { AriaAttributes, AriaRole, KeyboardEventHandler, MouseEventHandler } from 'react';
+import type { AriaAttributes, AriaRole, ElementType, KeyboardEventHandler, MouseEventHandler } from 'react';
 import type { BpkLayoutBackgroundColor } from './backgroundColors';
 import type { BpkSpacingValue, BpkSizeValue, BpkPositionValue, BpkPositionKeyword, BpkOverflowValue, BpkZIndexValue, BpkResponsiveValue } from './tokens';
 import type { TextColor, TextStyle } from '../../bpk-component-text';
@@ -23,6 +23,8 @@ export interface BpkSpacingProps {
     paddingEnd?: BpkResponsiveValue<BpkSpacingValue>;
     marginInline?: BpkResponsiveValue<BpkSpacingValue>;
     paddingInline?: BpkResponsiveValue<BpkSpacingValue>;
+    marginBlock?: BpkResponsiveValue<BpkSpacingValue>;
+    paddingBlock?: BpkResponsiveValue<BpkSpacingValue>;
     gap?: BpkResponsiveValue<BpkSpacingValue>;
     width?: BpkResponsiveValue<BpkSizeValue>;
     height?: BpkResponsiveValue<BpkSizeValue>;
@@ -60,6 +62,9 @@ export interface BpkCommonLayoutProps extends BpkSpacingProps, AriaAttributes {
     overflowX?: BpkResponsiveValue<BpkOverflowValue>;
     overflowY?: BpkResponsiveValue<BpkOverflowValue>;
     zIndex?: BpkZIndexValue;
+    as?: ElementType;
+    opacity?: number;
+    dir?: 'ltr' | 'rtl' | 'auto';
     'data-testid'?: string;
     'data-cy'?: string;
     color?: TextColor;

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

@@ -241,9 +241,9 @@ export function processResponsiveValue(value, converter, validator, propName) {
 export function processSpacingProps(props) {
   const spacingKeys = [
   // Padding props
-  'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingStart', 'paddingEnd', 'paddingInline',
+  'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingStart', 'paddingEnd', 'paddingInline', 'paddingBlock',
   // Margin props
-  'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginStart', 'marginEnd', 'marginInline',
+  'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginStart', 'marginEnd', 'marginInline', 'marginBlock',
   // Gap and spacing
   'gap', 'spacing', 'rowGap', 'columnGap',
   // Size props

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

@@ -3,19 +3,6 @@ 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
@@ -79,17 +66,10 @@ type BpkBoxResponsiveLayoutProps = {
 };
 type BpkBoxResponsiveLayoutPropKeys = keyof BpkBoxResponsiveLayoutProps;
 /**
- * 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
+ * Component-specific props for BpkBox.
+ * Explicit allowlist — does NOT inherit from Chakra BoxProps.
  */
-export interface BpkBoxSpecificProps extends Omit<RemoveCommonProps<BoxProps>, BpkBoxResponsiveLayoutPropKeys>, BpkBoxResponsiveLayoutProps, Omit<BpkFlexGridProps, BpkBoxResponsiveLayoutPropKeys> {
+export interface BpkBoxSpecificProps extends BpkBoxResponsiveLayoutProps, Omit<BpkFlexGridProps, BpkBoxResponsiveLayoutPropKeys> {
 }
 /**
  * Props for BpkBox component
@@ -147,10 +127,10 @@ export type BpkVesselProps = {
     as?: VesselElement;
 } & HTMLAttributes<HTMLElement>;
 /**
- * Component-specific props for BpkFlex
- * Includes all Flex props except those in BpkCommonLayoutProps
+ * Component-specific props for BpkFlex.
+ * Explicit allowlist — does NOT inherit from Chakra FlexProps.
  */
-export interface BpkFlexSpecificProps extends RemoveCommonProps<FlexProps> {
+export interface BpkFlexSpecificProps {
     direction?: BpkResponsiveValue<FlexProps['flexDirection']>;
     justify?: BpkResponsiveValue<FlexProps['justifyContent']>;
     align?: BpkResponsiveValue<FlexProps['alignItems']>;
@@ -168,10 +148,10 @@ export interface BpkFlexProps extends BpkCommonLayoutProps, BpkFlexSpecificProps
     children?: ReactNode;
 }
 /**
- * Component-specific props for BpkGrid
- * Includes all Grid props except those in BpkCommonLayoutProps
+ * Component-specific props for BpkGrid.
+ * Explicit allowlist — does NOT inherit from Chakra GridProps.
  */
-export interface BpkGridSpecificProps extends RemoveCommonProps<GridProps> {
+export interface BpkGridSpecificProps {
     justify?: BpkResponsiveValue<GridProps['justifyContent']>;
     align?: BpkResponsiveValue<GridProps['alignItems']>;
     templateColumns?: BpkResponsiveValue<GridProps['gridTemplateColumns']>;
@@ -194,10 +174,10 @@ export interface BpkGridProps extends BpkCommonLayoutProps, BpkGridSpecificProps
     children?: ReactNode;
 }
 /**
- * Component-specific props for BpkGridItem
- * Includes all GridItem props except those in BpkCommonLayoutProps
+ * Component-specific props for BpkGridItem.
+ * Explicit allowlist — does NOT inherit from Chakra GridItemProps.
  */
-export interface BpkGridItemSpecificProps extends RemoveCommonProps<GridItemProps> {
+export interface BpkGridItemSpecificProps {
     area?: GridItemProps['area'];
     colEnd?: GridItemProps['colEnd'];
     colStart?: GridItemProps['colStart'];
@@ -221,11 +201,21 @@ type BpkStackOptions = {
     [K in StackOptionKeysType]?: K extends keyof StackProps ? BpkResponsiveValue<StackProps[K]> | StackProps[K] : never;
 };
 /**
- * Component-specific props for BpkStack
- * Includes all Stack props except those in BpkCommonLayoutProps
- * Overrides StackOptions to support BpkResponsiveValue
- */
-export interface BpkStackSpecificProps extends Omit<RemoveCommonProps<StackProps>, StackOptionKeysType>, BpkStackOptions, BpkFlexGridProps {
+ * Component-specific props for BpkStack.
+ * Explicit allowlist — does NOT inherit from Chakra StackProps.
+ * 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'> {
+    /** 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. */
+    justifyContent?: BpkStackOptions['justify'];
 }
 /**
  * Props for BpkStack component

package/bpk-component-tooltip/src/BpkTooltip.d.ts

@@ -19,6 +19,7 @@ export type Props = {
     hideOnTouchDevices?: boolean;
     placement?: Placement;
     isOpen?: boolean;
+    zIndexValue?: number;
 };
-declare const BpkTooltip: ({ ariaLabel, children, hideOnTouchDevices, id, isOpen, padded, placement, target, type, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BpkTooltip: ({ ariaLabel, children, hideOnTouchDevices, id, isOpen, padded, placement, target, type, zIndexValue, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkTooltip;

package/bpk-component-tooltip/src/BpkTooltip.js

@@ -60,6 +60,7 @@ const BpkTooltip = ({
   placement = 'bottom',
   target,
   type = TOOLTIP_TYPES.light,
+  zIndexValue,
   ...rest
 }) => {
   const [isOpenState, setIsOpenState] = useState(isOpen);
@@ -107,7 +108,10 @@ const BpkTooltip = ({
       children: /*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-tooltip--container'),
         ref: refs.setFloating,
-        style: floatingStyles,
+        style: {
+          ...floatingStyles,
+          zIndex: zIndexValue
+        },
         ...getFloatingProps(),
         children: /*#__PURE__*/_jsx(TransitionInitialMount, {
           appearClassName: getClassName('bpk-tooltip--appear'),

package/package.json

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