@skyscanner/backpack-web 41.13.0 → 41.15.0

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

@@ -0,0 +1,236 @@
+import type { ReactNode } from 'react';
+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
+ * by default. BpkBox will reintroduce a minimal subset (onClick, onFocus,
+ * onBlur) explicitly on its own props type.
+ */
+type LayoutEventProps = 'onClick' | '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
+ * that are useful for structural layout.
+ */
+export interface BpkFlexGridProps {
+    display?: BoxProps['display'];
+    flexDirection?: BoxProps['flexDirection'];
+    flexWrap?: BoxProps['flexWrap'];
+    justifyContent?: BoxProps['justifyContent'];
+    alignItems?: BoxProps['alignItems'];
+    alignContent?: BoxProps['alignContent'];
+    flex?: BoxProps['flex'];
+    flexGrow?: BoxProps['flexGrow'];
+    flexShrink?: BoxProps['flexShrink'];
+    flexBasis?: BoxProps['flexBasis'];
+    order?: BoxProps['order'];
+    alignSelf?: BoxProps['alignSelf'];
+    justifySelf?: BoxProps['justifySelf'];
+    gridTemplateColumns?: BoxProps['gridTemplateColumns'];
+    gridTemplateRows?: BoxProps['gridTemplateRows'];
+    gridTemplateAreas?: BoxProps['gridTemplateAreas'];
+    gridAutoFlow?: BoxProps['gridAutoFlow'];
+    gridAutoRows?: BoxProps['gridAutoRows'];
+    gridAutoColumns?: BoxProps['gridAutoColumns'];
+    rowGap?: BoxProps['rowGap'];
+    columnGap?: BoxProps['columnGap'];
+}
+export type FlexGridPropKeys = keyof BpkFlexGridProps;
+/**
+ * Curated subset of Box layout props that support Backpack responsive values.
+ *
+ * NOTE:
+ * - These are structural layout props (flex/grid/display) that we want to allow
+ *   on `BpkBox`, but using Backpack breakpoint keys rather than Chakra's
+ *   array syntax or Chakra breakpoint keys.
+ * - Spacing/size/position props are handled separately via `BpkCommonLayoutProps`.
+ */
+type BpkBoxResponsiveLayoutProps = {
+    display?: BpkResponsiveValue<BoxProps['display']>;
+    flexDirection?: BpkResponsiveValue<BoxProps['flexDirection']>;
+    flexWrap?: BpkResponsiveValue<BoxProps['flexWrap']>;
+    justifyContent?: BpkResponsiveValue<BoxProps['justifyContent']>;
+    alignItems?: BpkResponsiveValue<BoxProps['alignItems']>;
+    alignContent?: BpkResponsiveValue<BoxProps['alignContent']>;
+    flex?: BpkResponsiveValue<BoxProps['flex']>;
+    flexGrow?: BpkResponsiveValue<BoxProps['flexGrow']>;
+    flexShrink?: BpkResponsiveValue<BoxProps['flexShrink']>;
+    flexBasis?: BpkResponsiveValue<BoxProps['flexBasis']>;
+    order?: BpkResponsiveValue<BoxProps['order']>;
+    alignSelf?: BpkResponsiveValue<BoxProps['alignSelf']>;
+    justifySelf?: BpkResponsiveValue<BoxProps['justifySelf']>;
+    gridTemplateColumns?: BpkResponsiveValue<BoxProps['gridTemplateColumns']>;
+    gridTemplateRows?: BpkResponsiveValue<BoxProps['gridTemplateRows']>;
+    gridTemplateAreas?: BpkResponsiveValue<BoxProps['gridTemplateAreas']>;
+    gridAutoFlow?: BpkResponsiveValue<BoxProps['gridAutoFlow']>;
+    gridAutoRows?: BpkResponsiveValue<BoxProps['gridAutoRows']>;
+    gridAutoColumns?: BpkResponsiveValue<BoxProps['gridAutoColumns']>;
+    gridColumn?: BpkResponsiveValue<BoxProps['gridColumn']>;
+    gridRow?: BpkResponsiveValue<BoxProps['gridRow']>;
+};
+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
+ */
+export interface BpkBoxSpecificProps extends Omit<RemoveCommonProps<BoxProps>, BpkBoxResponsiveLayoutPropKeys>, BpkBoxResponsiveLayoutProps, Omit<BpkFlexGridProps, BpkBoxResponsiveLayoutPropKeys> {
+}
+/**
+ * Props for BpkBox component
+ * Combines Box-specific props with Backpack common layout props
+ * and reintroduces a minimal set of interaction props.
+ */
+type BoxEventProps = Pick<BoxProps, 'onClick' | 'onFocus' | 'onBlur'>;
+export interface BpkBoxProps extends BpkCommonLayoutProps, BpkBoxSpecificProps {
+    children?: ReactNode;
+    onClick?: BoxEventProps['onClick'];
+    onFocus?: BoxEventProps['onFocus'];
+    onBlur?: BoxEventProps['onBlur'];
+}
+/**
+ * Valid HTML elements that can be used with BpkVessel
+ */
+export type VesselElement = 'div' | 'span' | 'section' | 'article' | 'nav' | 'main' | 'aside' | 'header' | 'footer';
+/**
+ * Props for BpkVessel component.
+ *
+ * BpkVessel is a "migration hatch" that renders an HTML element
+ * and accepts all standard HTML attributes for maximum migration flexibility.
+ *
+ * Accepts all React.HTMLAttributes including:
+ * - Styling: className, style
+ * - Testing: data-testid, data-cy, data-*
+ * - Accessibility: aria-*, role, tabIndex
+ * - Basic HTML: id, title, dir, lang, hidden, etc.
+ * - All standard DOM events: onClick, onChange, onFocus, etc.
+ *
+ * @example
+ * ```tsx
+ * <BpkVessel
+ *   className="legacy-wrapper"
+ *   style={{ padding: '16px', transition: 'opacity 0.3s' }}
+ *   data-testid="migration-wrapper"
+ *   onClick={handleClick}
+ * >
+ *   Content
+ * </BpkVessel>
+ *
+ * <BpkVessel
+ *   as="section"
+ *   className="legacy-section"
+ *   aria-label="Main content"
+ *   role="region"
+ *   dir="rtl"
+ * >
+ *   Section Content
+ * </BpkVessel>
+ * ```
+ */
+export type BpkVesselProps = {
+    as?: VesselElement;
+} & React.HTMLAttributes<HTMLElement>;
+/**
+ * Component-specific props for BpkFlex
+ * Includes all Flex props except those in BpkCommonLayoutProps
+ */
+export interface BpkFlexSpecificProps extends RemoveCommonProps<FlexProps> {
+    direction?: BpkResponsiveValue<FlexProps['flexDirection']>;
+    justify?: BpkResponsiveValue<FlexProps['justifyContent']>;
+    align?: BpkResponsiveValue<FlexProps['alignItems']>;
+    wrap?: BpkResponsiveValue<FlexProps['flexWrap']>;
+    grow?: BpkResponsiveValue<FlexProps['flexGrow']>;
+    shrink?: BpkResponsiveValue<FlexProps['flexShrink']>;
+    basis?: BpkResponsiveValue<BpkBasisValue>;
+    inline?: boolean;
+}
+/**
+ * Props for BpkFlex component
+ * Combines Flex-specific props with Backpack common layout props
+ */
+export interface BpkFlexProps extends BpkCommonLayoutProps, BpkFlexSpecificProps {
+    children?: ReactNode;
+}
+/**
+ * Component-specific props for BpkGrid
+ * Includes all Grid props except those in BpkCommonLayoutProps
+ */
+export interface BpkGridSpecificProps extends RemoveCommonProps<GridProps> {
+    justify?: BpkResponsiveValue<GridProps['justifyContent']>;
+    align?: BpkResponsiveValue<GridProps['alignItems']>;
+    templateColumns?: BpkResponsiveValue<GridProps['gridTemplateColumns']>;
+    templateRows?: BpkResponsiveValue<GridProps['gridTemplateRows']>;
+    templateAreas?: BpkResponsiveValue<GridProps['gridTemplateAreas']>;
+    autoFlow?: BpkResponsiveValue<GridProps['gridAutoFlow']>;
+    autoRows?: BpkResponsiveValue<GridProps['gridAutoRows']>;
+    autoColumns?: BpkResponsiveValue<GridProps['gridAutoColumns']>;
+    rowGap?: BpkResponsiveValue<BpkSpacingValue>;
+    columnGap?: BpkResponsiveValue<BpkSpacingValue>;
+    column?: BpkResponsiveValue<GridProps['gridColumn']>;
+    row?: BpkResponsiveValue<GridProps['gridRow']>;
+    inline?: boolean;
+}
+/**
+ * Props for BpkGrid component
+ * Combines Grid-specific props with Backpack common layout props
+ */
+export interface BpkGridProps extends BpkCommonLayoutProps, BpkGridSpecificProps {
+    children?: ReactNode;
+}
+/**
+ * Component-specific props for BpkGridItem
+ * Includes all GridItem props except those in BpkCommonLayoutProps
+ */
+export interface BpkGridItemSpecificProps extends RemoveCommonProps<GridItemProps> {
+    area?: GridItemProps['area'];
+    colEnd?: GridItemProps['colEnd'];
+    colStart?: GridItemProps['colStart'];
+    colSpan?: GridItemProps['colSpan'];
+    rowEnd?: GridItemProps['rowEnd'];
+    rowStart?: GridItemProps['rowStart'];
+    rowSpan?: GridItemProps['rowSpan'];
+}
+/**
+ * Props for BpkGridItem component
+ * Combines GridItem-specific props with Backpack common layout props
+ */
+export interface BpkGridItemProps extends BpkCommonLayoutProps, BpkGridItemSpecificProps {
+    children?: ReactNode;
+}
+type StackOptionKeysType = typeof StackOptionKeys[number];
+/**
+ * Overrides StackOptions to support BpkResponsiveValue
+ */
+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 {
+}
+/**
+ * Props for BpkStack component
+ * Combines Stack-specific props with Backpack common layout props
+ */
+export interface BpkStackProps extends BpkCommonLayoutProps, BpkStackSpecificProps {
+    children?: ReactNode;
+}
+export type { BpkCommonLayoutProps };

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

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "41.13.0",
+  "version": "41.15.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -22,6 +22,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@chakra-ui/react": "^3.30.0",
     "@floating-ui/react": "^0.26.12",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-compose-refs": "^1.1.1",