@skyscanner/backpack-web 42.9.0 → 42.10.0-dev-v24445021679.1

package/bpk-component-chatbot-input/src/hooks/useTextAreaAutoResize.d.ts

@@ -3,6 +3,7 @@ interface UseTextAreaAutoResizeProps {
     ref: RefObject<HTMLTextAreaElement>;
     value: string;
     enabled?: boolean;
+    maxLines?: number;
 }
 interface UseTextAreaAutoResizeReturn {
     isExpanding: boolean;
@@ -18,5 +19,5 @@ export declare const MAX_INPUT_HEIGHT_PHASE_2: number;
 export declare const MIN_CONTAINER_HEIGHT = 24;
 export declare const MAX_CONTAINER_HEIGHT = 96;
 export declare const PARENT_PADDING_TOP = 16;
-declare const useTextAreaAutoResize: ({ enabled, ref, value, }: UseTextAreaAutoResizeProps) => UseTextAreaAutoResizeReturn;
+declare const useTextAreaAutoResize: ({ enabled, maxLines, ref, value, }: UseTextAreaAutoResizeProps) => UseTextAreaAutoResizeReturn;
 export default useTextAreaAutoResize;

package/bpk-component-chatbot-input/src/hooks/useTextAreaAutoResize.js

@@ -26,6 +26,7 @@ export const MAX_CONTAINER_HEIGHT = 96;
 export const PARENT_PADDING_TOP = 16;
 const useTextAreaAutoResize = ({
   enabled = true,
+  maxLines,
   ref,
   value
 }) => {
@@ -99,15 +100,27 @@ const useTextAreaAutoResize = ({
       scrollHeight
     } = measureEl;
     const lines = Math.max(1, Math.ceil(scrollHeight / lineHeightRef.current));
-    const isCapped = lines >= 5;
-    const maxInputHeight = isCapped ? MAX_INPUT_HEIGHT_PHASE_2 : MAX_INPUT_HEIGHT_PHASE_1;
+    const hasCustomMaxLines = maxLines !== undefined;
+    const isCapped = hasCustomMaxLines ? lines >= maxLines : lines >= 5;
+    let maxInputHeight;
+    if (hasCustomMaxLines) {
+      maxInputHeight = lineHeightRef.current * maxLines;
+    } else {
+      maxInputHeight = isCapped ? MAX_INPUT_HEIGHT_PHASE_2 : MAX_INPUT_HEIGHT_PHASE_1;
+    }
     const targetInputHeight = Math.max(MIN_INPUT_HEIGHT, Math.min(scrollHeight, maxInputHeight));
-    const extraSpace = isCapped ? PARENT_PADDING_TOP : 0;
-    const targetContainerHeight = Math.max(MIN_CONTAINER_HEIGHT, Math.min(targetInputHeight - extraSpace, MAX_CONTAINER_HEIGHT));
+    const customMaxContainerHeight = hasCustomMaxLines ? lineHeightRef.current * maxLines : MAX_CONTAINER_HEIGHT;
+    const extraSpace = isCapped && !hasCustomMaxLines ? PARENT_PADDING_TOP : 0;
+    const targetContainerHeight = Math.max(MIN_CONTAINER_HEIGHT, Math.min(targetInputHeight - extraSpace, customMaxContainerHeight));
     setDimensions(prev => {
       const isContentAdded = value.length > previousValueRef.current.length;
       const isAppending = value.startsWith(previousValueRef.current);
-      const prevMaxHeight = prev.isCapped ? MAX_INPUT_HEIGHT_PHASE_2 : MAX_INPUT_HEIGHT_PHASE_1;
+      let prevMaxHeight;
+      if (hasCustomMaxLines) {
+        prevMaxHeight = lineHeightRef.current * maxLines;
+      } else {
+        prevMaxHeight = prev.isCapped ? MAX_INPUT_HEIGHT_PHASE_2 : MAX_INPUT_HEIGHT_PHASE_1;
+      }
       const isInitialRender = isInitialRenderRef.current;
       const shouldScroll = isContentAdded && isAppending && textarea.scrollHeight > prevMaxHeight || isInitialRender && scrollHeight > maxInputHeight;
       shouldScrollRef.current = shouldScroll;
@@ -122,7 +135,7 @@ const useTextAreaAutoResize = ({
       };
     });
     previousValueRef.current = value;
-  }, [value, ref, enabled, containerWidth]);
+  }, [value, ref, enabled, containerWidth, maxLines]);
   useLayoutEffect(() => {
     if (shouldScrollRef.current) {
       scrollToBottom();

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

@@ -1,10 +1,14 @@
 export { BpkProvider } from './src/BpkProvider';
+export { BpkLayoutProvider } from './src/BpkLayoutProvider';
+export { BpkArkProvider } from './src/BpkArkProvider';
 export { BpkBox } from './src/BpkBox';
 export { BpkVessel } from './src/BpkVessel';
 export { BpkFlex } from './src/BpkFlex';
 export { BpkGrid } from './src/BpkGrid';
 export { BpkGridItem } from './src/BpkGridItem';
 export type { BpkProviderProps } from './src/BpkProvider';
+export type { BpkLayoutProviderProps } from './src/BpkLayoutProvider';
+export type { BpkArkProviderProps } from './src/BpkArkProvider';
 export type { BpkBoxProps } from './src/BpkBox';
 export type { BpkVesselProps } from './src/BpkVessel';
 export type { BpkFlexProps } from './src/BpkFlex';

package/bpk-component-layout/index.js

@@ -17,6 +17,8 @@
  */
 
 export { BpkProvider } from "./src/BpkProvider";
+export { BpkLayoutProvider } from "./src/BpkLayoutProvider";
+export { BpkArkProvider } from "./src/BpkArkProvider";
 export { BpkBox } from "./src/BpkBox";
 export { BpkVessel } from "./src/BpkVessel";
 export { BpkFlex } from "./src/BpkFlex";

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

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+export interface BpkArkProviderProps {
+    children: ReactNode;
+}
+/**
+ * BpkArkProvider - Provides locale context for Ark-based Backpack components.
+ *
+ * Wraps children with Ark UI's LocaleProvider, reactively tracking
+ * document direction (html[dir]) and language (html[lang]) via MutationObserver.
+ * This enables correct RTL rendering for Ark-based components such as
+ * BpkCheckboxV2, BpkSegmentedControlV2, etc.
+ *
+ * Use BpkProvider (which composes BpkLayoutProvider + BpkArkProvider) if you
+ * need both layout primitives and Ark-based components. Use BpkArkProvider
+ * directly only if you need Ark locale context without the Chakra layout system.
+ *
+ * @param {BpkArkProviderProps} props - The provider props.
+ * @returns {JSX.Element} The provider wrapping its children with Ark locale context.
+ */
+export declare const BpkArkProvider: ({ children, }: BpkArkProviderProps) => JSX.Element;

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

@@ -0,0 +1,112 @@
+/*
+ * 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 { useEffect, useState } from 'react';
+import { LocaleProvider } from '@ark-ui/react';
+import { jsx as _jsx } from "react/jsx-runtime";
+// Fallback locale mapping used when no explicit locale is available on the document.
+// Maps DOM direction to minimal BCP 47 locales understood by Ark's isRTL() utility.
+// 'ar-SA' is the minimal RTL locale — Ark only uses it to derive dir='rtl'.
+const FALLBACK_LOCALE_BY_DIRECTION = {
+  ltr: 'en-US',
+  rtl: 'ar-SA'
+};
+
+// Known RTL language subtags (ISO 639 codes). Used as fallback when
+// Intl.Locale.textInfo is unavailable (Node < 22, older browsers).
+const RTL_LANGUAGE_SUBTAGS = new Set(['ar', 'he', 'fa', 'ur', 'yi', 'iw', 'ps', 'sd', 'ug', 'ku']);
+
+// Returns the text direction implied by a BCP 47 locale string.
+// Uses Intl.Locale.textInfo when available (Chrome 99+, Safari 15.4+, Firefox 126+, Node 22+);
+// falls back to a known-RTL-subtag lookup.
+const getLangDir = locale => {
+  try {
+    const dir = new Intl.Locale(locale).textInfo?.direction;
+    if (dir) return dir === 'rtl' ? 'rtl' : 'ltr';
+  } catch {
+    // Ignore invalid locale strings
+  }
+  return RTL_LANGUAGE_SUBTAGS.has(locale.split('-')[0].toLowerCase()) ? 'rtl' : 'ltr';
+};
+
+// Resolves the locale to pass to Ark's LocaleProvider.
+//
+// Priority rules:
+//   1. If html[dir] is explicitly set:
+//      - Use html[lang] only when its direction is consistent with html[dir].
+//      - Otherwise fall back to FALLBACK_LOCALE_BY_DIRECTION[dir].
+//      This prevents an LTR html[lang] (e.g. 'en' from a page template) from
+//      overriding an explicit html[dir]="rtl" signal (e.g. from a dev RTL toggle).
+//   2. If html[dir] is not set: use html[lang] if present, else 'en-US'.
+//
+// SSR-safe: returns 'en-US' when document is unavailable.
+const getArkLocale = () => {
+  if (typeof document === 'undefined') return 'en-US';
+  const explicitDir = document.documentElement.getAttribute('dir');
+  const lang = document.documentElement.getAttribute('lang');
+  if (explicitDir === 'rtl' || explicitDir === 'ltr') {
+    if (lang && getLangDir(lang) === explicitDir) return lang;
+    return FALLBACK_LOCALE_BY_DIRECTION[explicitDir];
+  }
+  return lang || 'en-US';
+};
+
+// Reactive hook: subscribes to document.documentElement[dir] and [lang] changes
+// via MutationObserver. Re-renders when direction or locale is toggled
+// (e.g. Storybook RTL toolbar, runtime locale switcher).
+// SSR-safe: always initialises to 'en-US' so server and client agree on the first render,
+//           avoiding hydration mismatches. The real locale is read inside useEffect,
+//           which does not run on the server.
+const useArkLocale = () => {
+  const [locale, setLocale] = useState('en-US');
+  useEffect(() => {
+    setLocale(getArkLocale());
+    const observer = new MutationObserver(() => setLocale(getArkLocale()));
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['dir', 'lang']
+    });
+    return () => observer.disconnect();
+  }, []);
+  return locale;
+};
+
+/**
+ * BpkArkProvider - Provides locale context for Ark-based Backpack components.
+ *
+ * Wraps children with Ark UI's LocaleProvider, reactively tracking
+ * document direction (html[dir]) and language (html[lang]) via MutationObserver.
+ * This enables correct RTL rendering for Ark-based components such as
+ * BpkCheckboxV2, BpkSegmentedControlV2, etc.
+ *
+ * Use BpkProvider (which composes BpkLayoutProvider + BpkArkProvider) if you
+ * need both layout primitives and Ark-based components. Use BpkArkProvider
+ * directly only if you need Ark locale context without the Chakra layout system.
+ *
+ * @param {BpkArkProviderProps} props - The provider props.
+ * @returns {JSX.Element} The provider wrapping its children with Ark locale context.
+ */
+export const BpkArkProvider = ({
+  children
+}) => {
+  const locale = useArkLocale();
+  return /*#__PURE__*/_jsx(LocaleProvider, {
+    locale: locale,
+    children: children
+  });
+};

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+export interface BpkLayoutProviderProps {
+    children: ReactNode;
+}
+/**
+ * BpkLayoutProvider - Provides context for Backpack layout components only.
+ *
+ * Wraps children with the Chakra UI system context configured with Backpack
+ * tokens (spacing, breakpoints). This is the minimal provider needed by
+ * layout primitives (BpkBox, BpkFlex, BpkGrid, BpkStack, etc.).
+ *
+ * Use this instead of BpkProvider when you only need layout components and
+ * want to avoid bundling Ark UI (used by BpkCheckboxV2, BpkSegmentedControlV2,
+ * and other Ark-based components).
+ *
+ * @param {BpkLayoutProviderProps} props - The provider props.
+ * @returns {JSX.Element} The provider wrapping its children with Chakra context.
+ */
+export declare const BpkLayoutProvider: ({ children, }: BpkLayoutProviderProps) => JSX.Element;

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

@@ -0,0 +1,50 @@
+/*
+ * 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 { ChakraProvider, createSystem, defaultBaseConfig } from '@chakra-ui/react';
+import { createBpkConfig } from "./theme";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Creates a Chakra UI system with Backpack token mappings.
+ *
+ * Uses `defaultBaseConfig` (conditions + utilities only) instead of
+ * `defaultConfig` to avoid bundling ~141KB of unused component recipes.
+ * See: https://chakra-ui.com/guides/component-bundle-optimization
+ */
+const bpkSystem = createSystem(defaultBaseConfig, createBpkConfig());
+
+/**
+ * BpkLayoutProvider - Provides context for Backpack layout components only.
+ *
+ * Wraps children with the Chakra UI system context configured with Backpack
+ * tokens (spacing, breakpoints). This is the minimal provider needed by
+ * layout primitives (BpkBox, BpkFlex, BpkGrid, BpkStack, etc.).
+ *
+ * Use this instead of BpkProvider when you only need layout components and
+ * want to avoid bundling Ark UI (used by BpkCheckboxV2, BpkSegmentedControlV2,
+ * and other Ark-based components).
+ *
+ * @param {BpkLayoutProviderProps} props - The provider props.
+ * @returns {JSX.Element} The provider wrapping its children with Chakra context.
+ */
+export const BpkLayoutProvider = ({
+  children
+}) => /*#__PURE__*/_jsx(ChakraProvider, {
+  value: bpkSystem,
+  children: children
+});

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

@@ -3,15 +3,14 @@ export interface BpkProviderProps {
     children: ReactNode;
 }
 /**
- * BpkProvider - Provides context for Backpack layout and Ark-based components.
+ * BpkProvider - Provides context for both Backpack layout and Ark-based components.
  *
- * Wraps children with:
- * - Chakra UI system context (for layout components: BpkFlex, BpkGrid, etc.)
- * - Ark UI LocaleProvider (for Ark-based components: BpkCheckboxV2, BpkSegmentedControlV2, etc.)
+ * This is a convenience wrapper that composes:
+ * - BpkLayoutProvider (Chakra UI system for layout components: BpkFlex, BpkGrid, etc.)
+ * - BpkArkProvider (Ark UI locale for Ark-based components: BpkCheckboxV2, BpkSegmentedControlV2, etc.)
  *
- * RTL support: reads document direction reactively via MutationObserver and passes
- * the appropriate locale to Ark's LocaleProvider. All Ark-based components in the
- * tree render correctly in RTL without requiring additional wrapping or prop changes.
+ * If you only use layout components and want a smaller bundle, use BpkLayoutProvider
+ * directly instead — it does not pull in @ark-ui/react.
  *
  * @param {BpkProviderProps} props - The provider props.
  * @returns {JSX.Element} The provider wrapping its children with Chakra and Ark context.

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

@@ -16,109 +16,26 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react';
-import { LocaleProvider } from '@ark-ui/react';
-import { ChakraProvider, createSystem, defaultBaseConfig } from '@chakra-ui/react';
-import { createBpkConfig } from "./theme";
+import { BpkArkProvider } from "./BpkArkProvider";
+import { BpkLayoutProvider } from "./BpkLayoutProvider";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * Creates a Chakra UI system with Backpack token mappings.
+ * BpkProvider - Provides context for both Backpack layout and Ark-based components.
  *
- * Uses `defaultBaseConfig` (conditions + utilities only) instead of
- * `defaultConfig` to avoid bundling ~141KB of unused component recipes.
- * See: https://chakra-ui.com/guides/component-bundle-optimization
- */
-const bpkSystem = createSystem(defaultBaseConfig, createBpkConfig());
-// Fallback locale mapping used when no explicit locale is available on the document.
-// Maps DOM direction to minimal BCP 47 locales understood by Ark's isRTL() utility.
-// 'ar-SA' is the minimal RTL locale — Ark only uses it to derive dir='rtl'.
-const FALLBACK_LOCALE_BY_DIRECTION = {
-  ltr: 'en-US',
-  rtl: 'ar-SA'
-};
-
-// Known RTL language subtags (ISO 639 codes). Used as fallback when
-// Intl.Locale.textInfo is unavailable (Node < 22, older browsers).
-const RTL_LANGUAGE_SUBTAGS = new Set(['ar', 'he', 'fa', 'ur', 'yi', 'iw', 'ps', 'sd', 'ug', 'ku']);
-
-// Returns the text direction implied by a BCP 47 locale string.
-// Uses Intl.Locale.textInfo when available (Chrome 99+, Safari 15.4+, Firefox 126+, Node 22+);
-// falls back to a known-RTL-subtag lookup.
-const getLangDir = locale => {
-  try {
-    const dir = new Intl.Locale(locale).textInfo?.direction;
-    if (dir) return dir === 'rtl' ? 'rtl' : 'ltr';
-  } catch {
-    // Ignore invalid locale strings
-  }
-  return RTL_LANGUAGE_SUBTAGS.has(locale.split('-')[0].toLowerCase()) ? 'rtl' : 'ltr';
-};
-
-// Resolves the locale to pass to Ark's LocaleProvider.
-//
-// Priority rules:
-//   1. If html[dir] is explicitly set:
-//      - Use html[lang] only when its direction is consistent with html[dir].
-//      - Otherwise fall back to FALLBACK_LOCALE_BY_DIRECTION[dir].
-//      This prevents an LTR html[lang] (e.g. 'en' from a page template) from
-//      overriding an explicit html[dir]="rtl" signal (e.g. from a dev RTL toggle).
-//   2. If html[dir] is not set: use html[lang] if present, else 'en-US'.
-//
-// SSR-safe: returns 'en-US' when document is unavailable.
-const getArkLocale = () => {
-  if (typeof document === 'undefined') return 'en-US';
-  const explicitDir = document.documentElement.getAttribute('dir');
-  const lang = document.documentElement.getAttribute('lang');
-  if (explicitDir === 'rtl' || explicitDir === 'ltr') {
-    if (lang && getLangDir(lang) === explicitDir) return lang;
-    return FALLBACK_LOCALE_BY_DIRECTION[explicitDir];
-  }
-  return lang || 'en-US';
-};
-
-// Reactive hook: subscribes to document.documentElement[dir] and [lang] changes
-// via MutationObserver. Re-renders BpkProvider when direction or locale is toggled
-// (e.g. Storybook RTL toolbar, runtime locale switcher).
-// SSR-safe: always initialises to 'en-US' so server and client agree on the first render,
-//           avoiding hydration mismatches. The real locale is read inside useEffect,
-//           which does not run on the server.
-const useArkLocale = () => {
-  const [locale, setLocale] = useState('en-US');
-  useEffect(() => {
-    setLocale(getArkLocale());
-    const observer = new MutationObserver(() => setLocale(getArkLocale()));
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['dir', 'lang']
-    });
-    return () => observer.disconnect();
-  }, []);
-  return locale;
-};
-
-/**
- * BpkProvider - Provides context for Backpack layout and Ark-based components.
- *
- * Wraps children with:
- * - Chakra UI system context (for layout components: BpkFlex, BpkGrid, etc.)
- * - Ark UI LocaleProvider (for Ark-based components: BpkCheckboxV2, BpkSegmentedControlV2, etc.)
+ * This is a convenience wrapper that composes:
+ * - BpkLayoutProvider (Chakra UI system for layout components: BpkFlex, BpkGrid, etc.)
+ * - BpkArkProvider (Ark UI locale for Ark-based components: BpkCheckboxV2, BpkSegmentedControlV2, etc.)
  *
- * RTL support: reads document direction reactively via MutationObserver and passes
- * the appropriate locale to Ark's LocaleProvider. All Ark-based components in the
- * tree render correctly in RTL without requiring additional wrapping or prop changes.
+ * If you only use layout components and want a smaller bundle, use BpkLayoutProvider
+ * directly instead — it does not pull in @ark-ui/react.
  *
  * @param {BpkProviderProps} props - The provider props.
  * @returns {JSX.Element} The provider wrapping its children with Chakra and Ark context.
  */
 export const BpkProvider = ({
   children
-}) => {
-  const locale = useArkLocale();
-  return /*#__PURE__*/_jsx(ChakraProvider, {
-    value: bpkSystem,
-    children: /*#__PURE__*/_jsx(LocaleProvider, {
-      locale: locale,
-      children: children
-    })
-  });
-};
+}) => /*#__PURE__*/_jsx(BpkLayoutProvider, {
+  children: /*#__PURE__*/_jsx(BpkArkProvider, {
+    children: children
+  })
+});

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

@@ -0,0 +1,13 @@
+/**
+ * Expands a textStyle token (or responsive object of tokens) into concrete
+ * CSS property values that can be spread directly onto a Chakra component.
+ *
+ * Supports:
+ * - Static values:     `textStyle="heading-3"` → `{ fontSize, lineHeight, fontWeight }`
+ * - Responsive objects: `textStyle={{ mobile: 'heading-5', desktop: 'heading-3' }}`
+ *   → `{ fontSize: { md: '...', '2xl': '...' }, lineHeight: { ... }, ... }`
+ *
+ * @param {any} value - A textStyle token string, responsive object, or undefined/null.
+ * @returns {Record<string, any>} An object of CSS props to spread, or an empty object if no match.
+ */
+export declare function expandTextStyleProps(value: any): Record<string, any>;