@skyscanner/backpack-web 42.26.0 → 42.27.0

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.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",