@skyscanner/backpack-web 42.1.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-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.1.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",

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckbox.d.ts

@@ -1,9 +0,0 @@
-declare const BpkCheckbox: {
-    Root: ({ checked, children, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: import("./BpkCheckboxRoot").BpkCheckboxRootProps) => import("react/jsx-runtime").JSX.Element;
-    Control: ({ children }: import("./BpkCheckboxControl").BpkCheckboxControlProps) => import("react/jsx-runtime").JSX.Element;
-    Indicator: () => null;
-    Label: ({ children }: import("./BpkCheckboxLabel").BpkCheckboxLabelProps) => import("react/jsx-runtime").JSX.Element;
-    Description: ({ children }: import("./BpkCheckboxDescription").BpkCheckboxDescriptionProps) => import("react/jsx-runtime").JSX.Element;
-    HiddenInput: () => import("react/jsx-runtime").JSX.Element;
-};
-export default BpkCheckbox;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxControl.d.ts

@@ -1,6 +0,0 @@
-import type { ReactNode } from 'react';
-export type BpkCheckboxControlProps = {
-    children: ReactNode;
-};
-declare const BpkCheckboxControl: ({ children }: BpkCheckboxControlProps) => import("react/jsx-runtime").JSX.Element;
-export default BpkCheckboxControl;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxDescription.d.ts

@@ -1,6 +0,0 @@
-import type { ReactNode } from 'react';
-export type BpkCheckboxDescriptionProps = {
-    children: ReactNode;
-};
-declare const BpkCheckboxDescription: ({ children }: BpkCheckboxDescriptionProps) => import("react/jsx-runtime").JSX.Element;
-export default BpkCheckboxDescription;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxHiddenInput.d.ts

@@ -1,2 +0,0 @@
-declare const BpkCheckboxHiddenInput: () => import("react/jsx-runtime").JSX.Element;
-export default BpkCheckboxHiddenInput;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxIndicator.d.ts

@@ -1,2 +0,0 @@
-declare const BpkCheckboxIndicator: () => null;
-export default BpkCheckboxIndicator;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxLabel.d.ts

@@ -1,6 +0,0 @@
-import type { ReactNode } from 'react';
-export type BpkCheckboxLabelProps = {
-    children: ReactNode;
-};
-declare const BpkCheckboxLabel: ({ children }: BpkCheckboxLabelProps) => import("react/jsx-runtime").JSX.Element;
-export default BpkCheckboxLabel;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxRoot.d.ts

@@ -1,16 +0,0 @@
-import type { ReactNode } from 'react';
-export type BpkCheckedState = boolean | 'indeterminate';
-export type BpkCheckboxRootProps = {
-    children: ReactNode;
-    checked?: BpkCheckedState;
-    defaultChecked?: BpkCheckedState;
-    disabled?: boolean;
-    id?: string;
-    invalid?: boolean;
-    name?: string;
-    onCheckedChange?: (checked: BpkCheckedState) => void;
-    required?: boolean;
-    value?: string;
-};
-declare const BpkCheckboxRoot: ({ checked, children, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: BpkCheckboxRootProps) => import("react/jsx-runtime").JSX.Element;
-export default BpkCheckboxRoot;