@skyscanner/backpack-web 42.0.0 → 42.2.0

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Title/BpkModalV3Title.js

@@ -0,0 +1,31 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Dialog } from '@ark-ui/react';
+import { cssModules, getDataComponentAttribute } from "../../../../bpk-react-utils";
+import STYLES from "./BpkModalV3Title.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkModalV3Title = ({
+  children
+}) => /*#__PURE__*/_jsx(Dialog.Title, {
+  className: getClassName('bpk-modal-v3__title'),
+  ...getDataComponentAttribute('ModalV3Title'),
+  children: children
+});
+export default BpkModalV3Title;

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Title.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.bpk-modal-v3__title{min-width:0;margin:0;flex:1;font-size:inherit;font-weight:inherit}

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Trigger/BpkModalV3Trigger.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+type BpkModalV3TriggerProps = {
+    children: ReactNode;
+    asChild?: boolean;
+};
+declare const BpkModalV3Trigger: ({ asChild, children, }: BpkModalV3TriggerProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkModalV3Trigger;
+export type { BpkModalV3TriggerProps };

package/bpk-component-modal/src/BpkModalV3/BpkModalV3Trigger/BpkModalV3Trigger.js

@@ -0,0 +1,30 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Dialog } from '@ark-ui/react';
+import { getDataComponentAttribute } from "../../../../bpk-react-utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkModalV3Trigger = ({
+  asChild,
+  children
+}) => /*#__PURE__*/_jsx(Dialog.Trigger, {
+  asChild: asChild,
+  ...getDataComponentAttribute('ModalV3Trigger'),
+  children: children
+});
+export default BpkModalV3Trigger;

package/bpk-component-modal/src/BpkModalV3/common-types.d.ts

@@ -0,0 +1 @@
+export type BpkModalV3Type = 'default' | 'full' | 'sheet';

package/bpk-component-modal/src/BpkModalV3/common-types.js

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

package/bpk-component-page-indicator/src/NavButton.d.ts

@@ -1,3 +1,4 @@
+import type { MouseEvent } from 'react';
 import { BUTTON_TYPES } from '../../bpk-component-button';
 export declare const DIRECTIONS: {
     readonly PREV: "PREV";
@@ -11,7 +12,7 @@ type Props = {
     currentIndex: number;
     direction: Direction;
     disabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>, newIndex: number, direction: Direction) => void;
+    onClick?: (event: MouseEvent<HTMLButtonElement>, newIndex: number, direction: Direction) => void;
     type?: ButtonType;
 };
 declare const NavButton: ({ ariaLabel, currentIndex, direction, disabled, onClick, type, }: Props) => import("react/jsx-runtime").JSX.Element;

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js

@@ -25,7 +25,7 @@ import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkScrollableCalendarGrid from "./BpkScrollableCalendarGrid";
 import { getMonthsArray, getMonthItemHeights } from "./utils";
 import STYLES from "./BpkScrollableCalendarGridList.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 
 // These constants are here to facilitate calculating the height
@@ -46,6 +46,7 @@ const BpkScrollableCalendarGridList = props => {
     ...rest
   } = props;
   const listRef = useRef(null);
+  const sentinelRef = useRef(null);
   const startDate = startOfDay(startOfMonth(minDate));
   const endDate = startOfDay(startOfMonth(rest.maxDate));
   const monthsCount = DateUtils.differenceInCalendarMonths(endDate, startDate);
@@ -54,11 +55,13 @@ const BpkScrollableCalendarGridList = props => {
   const rowHeight = customRowHeight;
   // Most calendar grids have 5 rows. Calculate height in px as this is what react-window expects.
   const estimatedMonthItemHeight = (BASE_MONTH_ITEM_HEIGHT + 5 * rowHeight) * DEFAULT_ROOT_FONT_SIZE;
-  const getInitialRootFontSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize) || DEFAULT_ROOT_FONT_SIZE;
 
   // The `react-window` API requires the height in pixels to be specified
   // To be able to scale text size, we use rem and then we get the root font size so that we can calculate the final value in px
-  const [rootFontSize, setRootFontSize] = useState(getInitialRootFontSize);
+  // Initialise to the default; the sentinel ResizeObserver corrects this to the true rendered
+  // value immediately on mount, so we never rely on getComputedStyle which can be stale under
+  // browser font scaling.
+  const [rootFontSize, setRootFontSize] = useState(DEFAULT_ROOT_FONT_SIZE);
   const months = useMemo(() => getMonthsArray(startDate, monthsCount), [minDate, monthsCount]);
   const monthItemHeights = useMemo(() => getMonthItemHeights(months, rest.weekStartsOn, COLUMN_COUNT, rowHeight * rootFontSize, BASE_MONTH_ITEM_HEIGHT * rootFontSize), [rootFontSize, months, rest.weekStartsOn]);
   useEffect(() => {
@@ -67,8 +70,35 @@ const BpkScrollableCalendarGridList = props => {
       listRef.current.resetAfterIndex(0);
     }
   }, [monthItemHeights]);
+  useEffect(() => {
+    // Some browsers apply font scaling at the rendering level without updating getComputedStyle.
+    // A sentinel element sized to 1rem lets us measure the true rendered px-per-rem directly,
+    // so that react-window item heights stay accurate regardless of browser font scaling.
+    const sentinel = sentinelRef.current;
+    if (!sentinel || typeof ResizeObserver === 'undefined') return undefined;
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      if (entry) {
+        const newRootFontSize = entry.contentRect.width || DEFAULT_ROOT_FONT_SIZE;
+        setRootFontSize(newRootFontSize);
+      }
+    });
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, []);
   const getHtmlElement = () => typeof document !== 'undefined' ? document.querySelector('html') : {};
   const getItemSize = index => monthItemHeights[index] || estimatedMonthItemHeight;
+  const calculateOffsetInPixels = numberOfMonths => {
+    // The `react-window` API requires the scroll offset to be provided in pixels.
+    // Here we use the pre-calculated item heights to find the correct pixel offset
+    let result = 0;
+    for (let i = 0; i < numberOfMonths; i += 1) {
+      result += getItemSize(i);
+    }
+    return result;
+  };
+  const date = selectionConfiguration?.type === CALENDAR_SELECTION_TYPE.single ? selectionConfiguration?.date : selectionConfiguration?.startDate;
+  const selectedDate = focusedDate || date;
   const rowRenderer = ({
     index,
     style
@@ -85,26 +115,14 @@ const BpkScrollableCalendarGridList = props => {
       "aria-hidden": index !== 1
     })
   });
-  const calculateOffsetInPixels = numberOfMonths => {
-    // The `react-window` API requires the scroll offset to be provided in pixels.
-    // Here we use the pre-calculated item heights to find the correct pixel offset
-    let result = 0;
-    for (let i = 0; i < numberOfMonths; i += 1) {
-      result += getItemSize(i);
-    }
-    return result;
-  };
-  const onResize = () => {
-    const newRootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || DEFAULT_ROOT_FONT_SIZE;
-    setRootFontSize(newRootFontSize);
-  };
-  const date = selectionConfiguration?.type === CALENDAR_SELECTION_TYPE.single ? selectionConfiguration?.date : selectionConfiguration?.startDate;
-  const selectedDate = focusedDate || date;
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: getClassName('bpk-scrollable-calendar-grid-list', className),
     ...getDataComponentAttribute('ScrollableCalendarGridList'),
-    children: /*#__PURE__*/_jsx(AutoSizer, {
-      onResize: onResize,
+    children: [/*#__PURE__*/_jsx("div", {
+      ref: sentinelRef,
+      className: getClassName('bpk-scrollable-calendar-grid-list__font-sentinel'),
+      "aria-hidden": "true"
+    }), /*#__PURE__*/_jsx(AutoSizer, {
       defaultHeight: estimatedMonthItemHeight,
       defaultWidth: ESTIMATED_MONTH_ITEM_WIDTH,
       children: ({
@@ -124,7 +142,7 @@ const BpkScrollableCalendarGridList = props => {
         ref: listRef,
         children: rowRenderer
       })
-    })
+    })]
   });
 };
 export default BpkScrollableCalendarGridList;

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-scrollable-calendar-grid-list{position:relative;width:100%;height:100%;min-height:26.25rem;overflow-x:hidden;box-sizing:border-box;-ms-overflow-style:-ms-autohiding-scrollbar}
+.bpk-scrollable-calendar-grid-list{position:relative;width:100%;height:100%;min-height:26.25rem;overflow-x:hidden;box-sizing:border-box;-ms-overflow-style:-ms-autohiding-scrollbar}.bpk-scrollable-calendar-grid-list__font-sentinel{position:absolute;visibility:hidden;width:1rem;height:1rem;overflow:hidden;pointer-events:none}

package/bpk-component-segmented-control/src/BpkSegmentedControlV2/BpkSegmentedControlV2.js

@@ -16,7 +16,8 @@
  * limitations under the License.
  */
 
-import { SegmentGroup } from '@ark-ui/react';
+import { useRef } from 'react';
+import { SegmentGroup, useLocaleContext } from '@ark-ui/react';
 import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
 import { SEGMENT_TYPES_V2 } from "./common-types";
 import STYLES from "./BpkSegmentedControlV2.module.css";
@@ -31,22 +32,42 @@ const BpkSegmentedControlV2Root = ({
   type = SEGMENT_TYPES_V2.CanvasDefault,
   value
 }) => {
+  const {
+    dir
+  } = useLocaleContext();
+  // Tracks the last user-selected value so it can be restored after a key={dir}
+  // remount. Without this, uncontrolled usage would reset to defaultValue on every
+  // direction change.
+  const lastValueRef = useRef(defaultValue);
   const containerClass = getClassName('bpk-segmented-control-v2', `bpk-segmented-control-v2--${type}`, shadow && 'bpk-segmented-control-v2--shadow');
-  return /*#__PURE__*/_jsxs(SegmentGroup.Root, {
-    className: containerClass,
-    value: value,
-    defaultValue: defaultValue,
-    onValueChange: onChange ? ({
-      value: selectedValue
-    }) => {
-      if (selectedValue !== null) onChange(selectedValue);
-    } : undefined,
-    orientation: "horizontal",
-    ...getDataComponentAttribute('SegmentedControlV2'),
-    children: [/*#__PURE__*/_jsx(SegmentGroup.Label, {
-      children: label
-    }), children]
-  });
+  return (
+    /*#__PURE__*/
+    // key={dir} is required because Zag.js measures the indicator position via
+    // el.offsetLeft (a physical pixel value) and only re-syncs when `value` changes —
+    // it has no listener on locale/direction. When direction changes, LocaleProvider
+    // updates the locale context but Zag's internal indicatorRect stays stale, leaving
+    // the sliding indicator visually offset. Forcing a remount via key={dir} restarts
+    // the Zag machine, which re-measures offsetLeft in the new layout direction.
+    // See: decisions/rtl-ark-localeprovider.md — "Zag machine indicator pattern"
+    _jsxs(SegmentGroup.Root, {
+      className: containerClass,
+      value: value,
+      defaultValue: lastValueRef.current,
+      onValueChange: ({
+        value: selectedValue
+      }) => {
+        if (selectedValue !== null) {
+          lastValueRef.current = selectedValue;
+          if (onChange) onChange(selectedValue);
+        }
+      },
+      orientation: "horizontal",
+      ...getDataComponentAttribute('SegmentedControlV2'),
+      children: [/*#__PURE__*/_jsx(SegmentGroup.Label, {
+        children: label
+      }), children]
+    }, dir)
+  );
 };
 const BpkSegmentedControlV2Item = ({
   children,

package/bpk-component-skeleton/src/BpkBaseSkeleton.d.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 type Props = {
     skeletonStyle: string;
     styleObj?: {

package/bpk-component-skeleton/src/BpkSkeleton.d.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { ComponentProps } from './common-types';
 declare const BpkSkeleton: (props: ComponentProps) => JSX.Element;
 export default BpkSkeleton;

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

@@ -4,10 +4,11 @@ import BpkTableCell from './src/BpkTableCell';
 import BpkTableHead from './src/BpkTableHead';
 import BpkTableHeadCell from './src/BpkTableHeadCell';
 import BpkTableRow from './src/BpkTableRow';
+import { TABLE_BODY_TYPES } from './src/common-types';
 export type { BpkTableProps } from './src/BpkTable';
 export type { BpkTableHeadProps } from './src/BpkTableHead';
 export type { BpkTableBodyProps } from './src/BpkTableBody';
 export type { BpkTableRowProps } from './src/BpkTableRow';
 export type { BpkTableCellProps } from './src/BpkTableCell';
 export type { BpkTableHeadCellProps } from './src/BpkTableHeadCell';
-export { BpkTable, BpkTableHead, BpkTableBody, BpkTableRow, BpkTableCell, BpkTableHeadCell, };
+export { BpkTable, BpkTableHead, BpkTableBody, BpkTableRow, BpkTableCell, BpkTableHeadCell, TABLE_BODY_TYPES, };

package/bpk-component-table/index.js

@@ -22,4 +22,5 @@ import BpkTableCell from "./src/BpkTableCell";
 import BpkTableHead from "./src/BpkTableHead";
 import BpkTableHeadCell from "./src/BpkTableHeadCell";
 import BpkTableRow from "./src/BpkTableRow";
-export { BpkTable, BpkTableHead, BpkTableBody, BpkTableRow, BpkTableCell, BpkTableHeadCell };
+import { TABLE_BODY_TYPES } from "./src/common-types";
+export { BpkTable, BpkTableHead, BpkTableBody, BpkTableRow, BpkTableCell, BpkTableHeadCell, TABLE_BODY_TYPES };

package/bpk-component-table/src/BpkTable.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-table{width:100%;margin-bottom:.5rem;border-collapse:collapse;table-layout:fixed;box-shadow:0 0 0 1px #c1c7cf}.bpk-table__cell{padding:1rem}.bpk-table__cell--head{background-color:#eff3f8;text-align:left;font-size:1rem;line-height:1.5rem;font-weight:700}html[dir=rtl] .bpk-table__cell--head{text-align:right}.bpk-table__cell--wordBreak{white-space:normal;overflow-wrap:break-word}
+.bpk-table{width:100%;margin-bottom:.5rem;border-collapse:collapse;table-layout:fixed;box-shadow:0 0 0 1px #c1c7cf}.bpk-table__body--striped tr:nth-child(even){background-color:#eff3f8}.bpk-table__cell{padding:1rem}.bpk-table__cell--head{background-color:#eff3f8;text-align:left;font-size:1rem;line-height:1.5rem;font-weight:700}html[dir=rtl] .bpk-table__cell--head{text-align:right}.bpk-table__cell--wordBreak{white-space:normal;overflow-wrap:break-word}

package/bpk-component-table/src/BpkTableBody.d.ts

@@ -1,7 +1,10 @@
 import type { ReactNode, HTMLAttributes } from 'react';
+import type { TableBodyType } from './common-types';
 export interface BpkTableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
     /** The content of the table */
     children: ReactNode;
+    /** The type of table body styling */
+    type?: TableBodyType;
 }
-declare const BpkTableBody: (props: BpkTableBodyProps) => import("react/jsx-runtime").JSX.Element;
+declare const BpkTableBody: ({ children, className, type, ...rest }: BpkTableBodyProps) => import("react/jsx-runtime").JSX.Element;
 export default BpkTableBody;

package/bpk-component-table/src/BpkTableBody.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -17,7 +16,23 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * limitations under the License.
  */
 
-const BpkTableBody = props => /*#__PURE__*/_jsx("tbody", {
-  ...props
-});
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
+import { TABLE_BODY_TYPES } from "./common-types";
+import STYLES from "./BpkTable.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkTableBody = ({
+  children,
+  className,
+  type = TABLE_BODY_TYPES.default,
+  ...rest
+}) => {
+  const classNames = getClassName(type === TABLE_BODY_TYPES.striped && 'bpk-table__body--striped', className);
+  return /*#__PURE__*/_jsx("tbody", {
+    ...rest,
+    className: classNames || undefined,
+    ...getDataComponentAttribute('TableBody'),
+    children: children
+  });
+};
 export default BpkTableBody;

package/bpk-component-table/src/common-types.d.ts

@@ -0,0 +1,5 @@
+export declare const TABLE_BODY_TYPES: {
+    readonly default: "default";
+    readonly striped: "striped";
+};
+export type TableBodyType = (typeof TABLE_BODY_TYPES)[keyof typeof TABLE_BODY_TYPES];

package/bpk-component-table/src/common-types.js

@@ -0,0 +1,22 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const TABLE_BODY_TYPES = {
+  default: 'default',
+  striped: 'striped'
+};

package/bpk-react-utils/src/Portal.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import type { ReactNode } from 'react';
+import type { JSX, ReactNode } from 'react';
 type InteractionEvents = TouchEvent | MouseEvent | KeyboardEvent;
 type Props = {
     children: string | ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "42.0.0",
+  "version": "42.2.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -37,7 +37,7 @@
     "d3-scale": "^4.0.2",
     "downshift": "^9.0.10",
     "intersection-observer": "^0.12.2",
-    "lodash": "^4.17.20",
+    "lodash": "^4.17.23",
     "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",
     "normalize.css": "4.2.0",