@skyscanner/backpack-web 42.10.0 → 42.11.0

package/bpk-component-ai-blurb/src/BpkAiBlurb.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-ai-blurb{display:flex;flex-direction:column;gap:.5rem}.bpk-ai-blurb__header{color:#626971}.bpk-ai-blurb__header svg{fill:currentcolor}.bpk-ai-blurb__summary{display:block}.bpk-ai-blurb__error{display:flex;margin:0;flex-wrap:wrap;align-items:baseline;gap:0 .25rem;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-ai-blurb__feedback-thumb{display:inline-flex;padding:0;align-items:center;border:none;background:none;color:#161616;cursor:pointer;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-ai-blurb__feedback-thumb svg{fill:currentcolor}.bpk-ai-blurb__feedback-thumb:hover{color:#626971}.bpk-ai-blurb__feedback-thumb:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-ai-blurb__ellipsis{display:inline;vertical-align:baseline;margin-inline-start:.25rem}.bpk-ai-blurb__ellipsis-dot{display:inline;opacity:0;vertical-align:baseline;animation:bpk-ai-blurb-ellipsis-dot-1 1.2s infinite step-end}@media(prefers-reduced-motion: reduce){.bpk-ai-blurb__ellipsis-dot{opacity:1;animation:none}}.bpk-ai-blurb__ellipsis-dot--2{animation-name:bpk-ai-blurb-ellipsis-dot-2}.bpk-ai-blurb__ellipsis-dot--3{animation-name:bpk-ai-blurb-ellipsis-dot-3}@keyframes bpk-ai-blurb-ellipsis-dot-1{0%{opacity:1}75%{opacity:0}100%{opacity:0}}@keyframes bpk-ai-blurb-ellipsis-dot-2{0%{opacity:0}25%{opacity:1}75%{opacity:0}100%{opacity:0}}@keyframes bpk-ai-blurb-ellipsis-dot-3{0%{opacity:0}50%{opacity:1}75%{opacity:0}100%{opacity:0}}
+.bpk-ai-blurb{display:flex;flex-direction:column;gap:.5rem}.bpk-ai-blurb__header{color:#626971}.bpk-ai-blurb__header svg{fill:currentcolor}.bpk-ai-blurb__summary{display:block}.bpk-ai-blurb__error{display:flex;margin:0;flex-wrap:wrap;align-items:baseline;gap:0 .25rem;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-ai-blurb__ellipsis{display:inline;vertical-align:baseline;margin-inline-start:.25rem}.bpk-ai-blurb__ellipsis-dot{display:inline;opacity:0;vertical-align:baseline;animation:bpk-ai-blurb-ellipsis-dot-1 1.2s infinite step-end}@media(prefers-reduced-motion: reduce){.bpk-ai-blurb__ellipsis-dot{opacity:1;animation:none}}.bpk-ai-blurb__ellipsis-dot--2{animation-name:bpk-ai-blurb-ellipsis-dot-2}.bpk-ai-blurb__ellipsis-dot--3{animation-name:bpk-ai-blurb-ellipsis-dot-3}@keyframes bpk-ai-blurb-ellipsis-dot-1{0%{opacity:1}75%{opacity:0}100%{opacity:0}}@keyframes bpk-ai-blurb-ellipsis-dot-2{0%{opacity:0}25%{opacity:1}75%{opacity:0}100%{opacity:0}}@keyframes bpk-ai-blurb-ellipsis-dot-3{0%{opacity:0}50%{opacity:1}75%{opacity:0}100%{opacity:0}}

package/bpk-component-ai-blurb/src/BpkAiBlurbFeedback.js

@@ -18,14 +18,10 @@
 
 import { useState } from 'react';
 import BpkAriaLive from "../../bpk-component-aria-live";
-import BpkSmallThumbsDownIcon from "../../bpk-component-icon/sm/thumbs-down";
-import BpkSmallThumbsUpIcon from "../../bpk-component-icon/sm/thumbs-up";
 import { BpkFlex, BpkSpacing } from "../../bpk-component-layout";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkAiBlurb.module.css";
+import BpkThumbButton from "../../bpk-component-thumb-button";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
 const BpkAiBlurbFeedback = ({
   feedbackText,
   onFeedback,
@@ -45,22 +41,18 @@ const BpkAiBlurbFeedback = ({
       children: [/*#__PURE__*/_jsx(BpkText, {
         textStyle: TEXT_STYLES.caption,
         children: feedbackText
-      }), /*#__PURE__*/_jsx("button", {
-        type: "button",
-        className: getClassName('bpk-ai-blurb__feedback-thumb'),
-        onClick: () => handleVote(true),
-        "aria-label": thumbsUpLabel,
-        children: /*#__PURE__*/_jsx(BpkSmallThumbsUpIcon, {
-          "aria-hidden": true
-        })
-      }), /*#__PURE__*/_jsx("button", {
-        type: "button",
-        className: getClassName('bpk-ai-blurb__feedback-thumb'),
-        onClick: () => handleVote(false),
-        "aria-label": thumbsDownLabel,
-        children: /*#__PURE__*/_jsx(BpkSmallThumbsDownIcon, {
-          "aria-hidden": true
-        })
+      }), /*#__PURE__*/_jsx(BpkThumbButton, {
+        type: "up",
+        size: "small",
+        iconColor: "primary",
+        accessibilityLabel: thumbsUpLabel,
+        onClick: () => handleVote(true)
+      }), /*#__PURE__*/_jsx(BpkThumbButton, {
+        type: "down",
+        size: "small",
+        iconColor: "primary",
+        accessibilityLabel: thumbsDownLabel,
+        onClick: () => handleVote(false)
       })]
     }), /*#__PURE__*/_jsx(BpkAriaLive, {
       visible: hasVoted,

package/bpk-component-bottom-sheet/src/BpkBottomSheet.js

@@ -132,6 +132,7 @@ const BpkBottomSheet = ({
           title: titleWithId,
           titleTextStyle: TEXT_STYLES.label1,
           titleTagName: hasTitle ? 'h2' : 'span',
+          wrapTitle: true,
           className: getClassName('bpk-bottom-sheet--header'),
           leadingButton: /*#__PURE__*/_jsx(BpkCloseButton, {
             label: closeLabel,

package/bpk-component-chatbot-input/index.d.ts

@@ -1,7 +1,6 @@
 import BpkChatbotInput from './src/BpkChatbotInput';
-export type { BpkChatbotInputProps } from './src/common-types';
+export type { BpkChatbotInputInputProps, BpkChatbotInputNamespace, BpkChatbotInputRootProps, BpkChatbotInputToolbarProps, ChatbotInputType, SendButtonRenderProps, } from './src/common-types';
 export { CHATBOT_INPUT_TYPES } from './src/common-types';
-export type { ChatbotInputType } from './src/common-types';
 export { useChatbotInputManager } from './src/hooks';
 export { default as themeAttributes } from './src/themeAttributes';
 export default BpkChatbotInput;

package/bpk-component-chatbot-input/src/BpkChatbotInput.d.ts

@@ -1,4 +1,14 @@
-import type { BpkChatbotInputProps } from './common-types';
-export type { BpkChatbotInputProps };
-declare const BpkChatbotInput: ({ inputType, inputValue, isPolling, isSending, loadingAriaLabel, maxCharacters, onInputBlur, onInputChange, onInputClick, onInputFocus, onKeyDown, onSubmit, placeholder, sendAriaLabel, }: BpkChatbotInputProps) => import("react/jsx-runtime").JSX.Element;
+import type { BpkChatbotInputNamespace } from './common-types';
+/**
+ * BpkChatbotInput is a composable chatbot input namespace for Backpack.
+ *
+ * @example
+ * <BpkChatbotInput.Root>
+ *   <BpkChatbotInput.Input {...inputProps} />
+ *   <BpkChatbotInput.Toolbar>
+ *     <BpkButton type={BUTTON_TYPES.link}>Attach</BpkButton>
+ *   </BpkChatbotInput.Toolbar>
+ * </BpkChatbotInput.Root>
+ */
+declare const BpkChatbotInput: BpkChatbotInputNamespace;
 export default BpkChatbotInput;

package/bpk-component-chatbot-input/src/BpkChatbotInput.js

@@ -16,103 +16,23 @@
  * limitations under the License.
  */
 
-import { BpkFlex, BpkSpacing } from "../../bpk-component-layout";
-import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
-import InputField from "./InputField/InputField";
-import SendButton from "./SendButton/SendButton";
-import TextAreaField from "./TextAreaField/TextAreaField";
-import { CHATBOT_INPUT_TYPES } from "./common-types";
-import { MAX_CHARACTERS } from "./constants";
-import { useChatbotInput } from "./hooks";
-import STYLES from "./BpkChatbotInput.module.css";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
-const BpkChatbotInput = ({
-  inputType = CHATBOT_INPUT_TYPES.COMPOSER,
-  inputValue,
-  isPolling = false,
-  isSending = false,
-  loadingAriaLabel,
-  maxCharacters = MAX_CHARACTERS,
-  onInputBlur,
-  onInputChange,
-  onInputClick = () => {},
-  onInputFocus,
-  onKeyDown = () => {},
-  onSubmit,
-  placeholder,
-  sendAriaLabel
-}) => {
-  const {
-    containerHeight,
-    handleSubmit,
-    inputProps,
-    inputRef,
-    isCapped,
-    isCars,
-    isExpanding,
-    isOverLimit,
-    sendButtonDisabled,
-    textareaHeight
-  } = useChatbotInput({
-    placeholder,
-    inputType,
-    inputValue,
-    isPolling,
-    isSending,
-    maxCharacters,
-    onInputBlur,
-    onInputChange,
-    onInputClick,
-    onInputFocus,
-    onKeyDown,
-    onSubmit
-  });
-  const isComposer = inputType === CHATBOT_INPUT_TYPES.COMPOSER;
-  const containerClassName = getClassName(isCars ? 'bpk-chatbot-input--cars' : 'bpk-chatbot-input--composer', isComposer && 'bpk-chatbot-input--composer--with-shadow', isOverLimit && !isCars && 'bpk-chatbot-input--composer--overLimit');
-  const flexProps = isCars ? {
-    align: 'center',
-    gap: BpkSpacing.MD,
-    paddingTop: BpkSpacing.MD,
-    paddingBottom: BpkSpacing.MD,
-    paddingEnd: BpkSpacing.MD,
-    paddingStart: BpkSpacing.Base
-  } : {
-    align: isExpanding ? 'flex-end' : 'center',
-    gap: BpkSpacing.Base,
-    padding: BpkSpacing.Base
-  };
-  const handleContainerEvent = e => {
-    e.stopPropagation();
-  };
-  return /*#__PURE__*/_jsx("div", {
-    className: containerClassName,
-    onClick: handleContainerEvent,
-    onTouchStart: handleContainerEvent,
-    role: "presentation",
-    "data-testid": "bpk-chatbot-input-container",
-    ...getDataComponentAttribute('ChatbotInput'),
-    children: /*#__PURE__*/_jsxs(BpkFlex, {
-      ...flexProps,
-      children: [isCars ? /*#__PURE__*/_jsx(InputField, {
-        ref: inputRef,
-        ...inputProps
-      }) : /*#__PURE__*/_jsx(TextAreaField, {
-        ref: inputRef,
-        containerHeight: containerHeight,
-        textareaHeight: textareaHeight,
-        isCapped: isCapped,
-        isExpanding: isExpanding,
-        isComposer: isComposer,
-        ...inputProps
-      }), /*#__PURE__*/_jsx(SendButton, {
-        isCars: isCars,
-        disabled: sendButtonDisabled,
-        onClick: handleSubmit,
-        ariaLabel: isCars && isPolling ? loadingAriaLabel : sendAriaLabel,
-        isLoading: !!(isCars && isPolling)
-      })]
-    })
-  });
+import BpkChatbotInputInput from "./BpkChatbotInputInput";
+import BpkChatbotInputRoot from "./BpkChatbotInputRoot";
+import BpkChatbotInputToolbar from "./BpkChatbotInputToolbar";
+/**
+ * BpkChatbotInput is a composable chatbot input namespace for Backpack.
+ *
+ * @example
+ * <BpkChatbotInput.Root>
+ *   <BpkChatbotInput.Input {...inputProps} />
+ *   <BpkChatbotInput.Toolbar>
+ *     <BpkButton type={BUTTON_TYPES.link}>Attach</BpkButton>
+ *   </BpkChatbotInput.Toolbar>
+ * </BpkChatbotInput.Root>
+ */
+const BpkChatbotInput = {
+  Root: BpkChatbotInputRoot,
+  Input: BpkChatbotInputInput,
+  Toolbar: BpkChatbotInputToolbar
 };
 export default BpkChatbotInput;

package/bpk-component-chatbot-input/src/BpkChatbotInput.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-chatbot-input--cars{transition:border-color 200ms ease,box-shadow 200ms ease;border:.09375rem solid #c1c7cf;background:#fff;box-shadow:none;box-sizing:border-box;touch-action:manipulation;border-radius:.75rem;border-radius:var(--bpk-chatbot-input-border-radius, 0.75rem)}.bpk-no-touch-support .bpk-chatbot-input--cars:hover:not(:active):not(:disabled){border-color:#0062e3;border-color:var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-chatbot-input--cars:hover:not(:active):not(:disabled){border-color:#0062e3;border-color:var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227))}.bpk-chatbot-input--cars:active{border-color:#0062e3;border-color:var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227))}.bpk-chatbot-input--cars:focus-within{box-shadow:0 0 0 .03125rem #0062e3;box-shadow:0 0 0 .03125rem var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227));border-color:#0062e3;border-color:var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227))}.bpk-chatbot-input--composer{position:relative;transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1),box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);border:none;background:#fff;box-sizing:border-box;will-change:transform,box-shadow;border-radius:.75rem;border-radius:var(--bpk-chatbot-input-border-radius, 0.75rem)}.bpk-chatbot-input--composer--with-shadow:focus-within{box-shadow:0px 12px 50px 0px rgba(37,32,31,.25)}.bpk-chatbot-input--composer--overLimit{transform:translateY(-0.25rem)}
+.bpk-chatbot-input--cars{transition:border-color 200ms ease,box-shadow 200ms ease;border:.09375rem solid #c1c7cf;background:#fff;box-shadow:none;box-sizing:border-box;touch-action:manipulation;border-radius:.75rem;border-radius:var(--bpk-chatbot-input-border-radius, 0.75rem)}.bpk-no-touch-support .bpk-chatbot-input--cars:hover:not(:active):not(:disabled){border-color:#0062e3;border-color:var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-chatbot-input--cars:hover:not(:active):not(:disabled){border-color:#0062e3;border-color:var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227))}.bpk-chatbot-input--cars:active{border-color:#0062e3;border-color:var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227))}.bpk-chatbot-input--cars:focus-within{box-shadow:0 0 0 .03125rem #0062e3;box-shadow:0 0 0 .03125rem var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227));border-color:#0062e3;border-color:var(--bpk-chatbot-input-focus-border-color, rgb(0, 98, 227))}.bpk-chatbot-input--composer{position:relative;transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1),box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);border:none;background:#fff;box-sizing:border-box;will-change:transform,box-shadow;border-radius:.75rem;border-radius:var(--bpk-chatbot-input-border-radius, 0.75rem)}.bpk-chatbot-input--composer--with-shadow:focus-within{box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-chatbot-input--composer--overLimit{transform:translateY(-0.25rem)}

package/bpk-component-chatbot-input/src/BpkChatbotInputContext.d.ts

@@ -0,0 +1,9 @@
+import type { ChatbotInputType } from './common-types';
+type BpkChatbotInputContextValue = {
+    inputType: ChatbotInputType;
+    isOverLimit: boolean;
+    setIsOverLimit: (value: boolean) => void;
+};
+export declare const BpkChatbotInputContext: import("react").Context<BpkChatbotInputContextValue>;
+export declare const useChatbotInputContext: () => BpkChatbotInputContextValue;
+export {};

package/bpk-component-chatbot-input/src/BpkChatbotInputContext.js

@@ -0,0 +1,26 @@
+/*
+ * 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 { createContext, useContext } from 'react';
+import { CHATBOT_INPUT_TYPES } from "./common-types";
+export const BpkChatbotInputContext = /*#__PURE__*/createContext({
+  inputType: CHATBOT_INPUT_TYPES.COMPOSER,
+  isOverLimit: false,
+  setIsOverLimit: () => {}
+});
+export const useChatbotInputContext = () => useContext(BpkChatbotInputContext);

package/bpk-component-chatbot-input/src/BpkChatbotInputInput.d.ts

@@ -0,0 +1,3 @@
+import type { BpkChatbotInputInputProps } from './common-types';
+declare const BpkChatbotInputInput: ({ inputValue, isPolling, isSending, loadingAriaLabel, maxCharacters, maxLines, onInputBlur, onInputChange, onInputClick, onInputFocus, onKeyDown, onSubmit, placeholder, renderSendButton, sendAriaLabel, }: BpkChatbotInputInputProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkChatbotInputInput;

package/bpk-component-chatbot-input/src/BpkChatbotInputInput.js

@@ -0,0 +1,125 @@
+/*
+ * 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 } from 'react';
+import BpkButton, { BUTTON_TYPES, SIZE_TYPES } from "../../bpk-component-button";
+import { withButtonAlignment } from "../../bpk-component-icon";
+import ArrowUpIcon from "../../bpk-component-icon/sm/long-arrow-up";
+import { BpkFlex, BpkSpacing } from "../../bpk-component-layout";
+import { getDataComponentAttribute } from "../../bpk-react-utils";
+import { useChatbotInputContext } from "./BpkChatbotInputContext";
+import InputField from "./InputField/InputField";
+import TextAreaField from "./TextAreaField/TextAreaField";
+import { CHATBOT_INPUT_TYPES } from "./common-types";
+import { MAX_CHARACTERS } from "./constants";
+import { useChatbotInput } from "./hooks";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AlignedArrowUpIcon = withButtonAlignment(ArrowUpIcon);
+const BpkChatbotInputInput = ({
+  inputValue,
+  isPolling = false,
+  isSending = false,
+  loadingAriaLabel,
+  maxCharacters = MAX_CHARACTERS,
+  maxLines,
+  onInputBlur,
+  onInputChange,
+  onInputClick = () => {},
+  onInputFocus,
+  onKeyDown = () => {},
+  onSubmit,
+  placeholder,
+  renderSendButton,
+  sendAriaLabel
+}) => {
+  const {
+    inputType,
+    setIsOverLimit
+  } = useChatbotInputContext();
+  const {
+    containerHeight,
+    handleSubmit,
+    inputProps,
+    inputRef,
+    isCapped,
+    isCars,
+    isExpanding,
+    isOverLimit,
+    sendButtonDisabled,
+    textareaHeight
+  } = useChatbotInput({
+    placeholder,
+    inputType,
+    inputValue,
+    isPolling,
+    isSending,
+    maxCharacters,
+    maxLines,
+    onInputBlur,
+    onInputChange,
+    onInputClick,
+    onInputFocus,
+    onKeyDown,
+    onSubmit
+  });
+  useEffect(() => {
+    setIsOverLimit(isOverLimit);
+  }, [isOverLimit, setIsOverLimit]);
+  const isComposer = inputType === CHATBOT_INPUT_TYPES.COMPOSER;
+  const flexProps = isCars ? {
+    align: 'center',
+    gap: BpkSpacing.MD
+  } : {
+    align: isExpanding ? 'flex-end' : 'center',
+    gap: BpkSpacing.Base
+  };
+  return /*#__PURE__*/_jsxs(BpkFlex, {
+    width: "100%",
+    ...flexProps,
+    ...getDataComponentAttribute('ChatbotInput.Input'),
+    children: [isCars ? /*#__PURE__*/_jsx(InputField, {
+      ref: inputRef,
+      ...inputProps
+    }) : /*#__PURE__*/_jsx(TextAreaField, {
+      ref: inputRef,
+      containerHeight: containerHeight,
+      textareaHeight: textareaHeight,
+      isCapped: isCapped,
+      isExpanding: isExpanding,
+      isComposer: isComposer,
+      maxLines: maxLines,
+      ...inputProps
+    }), renderSendButton ? renderSendButton({
+      disabled: sendButtonDisabled,
+      onClick: handleSubmit,
+      loading: isPolling,
+      ariaLabel: isPolling ? loadingAriaLabel : sendAriaLabel
+    }) : /*#__PURE__*/_jsx(BpkButton, {
+      type: BUTTON_TYPES.primary,
+      size: SIZE_TYPES.small,
+      iconOnly: true,
+      onClick: handleSubmit,
+      disabled: sendButtonDisabled,
+      loading: isPolling,
+      "aria-label": isPolling ? loadingAriaLabel : sendAriaLabel,
+      "data-testid": "bpk-chatbot-input-send",
+      children: /*#__PURE__*/_jsx(AlignedArrowUpIcon, {})
+    })]
+  });
+};
+export default BpkChatbotInputInput;

package/bpk-component-chatbot-input/src/BpkChatbotInputRoot.d.ts

@@ -0,0 +1,3 @@
+import type { BpkChatbotInputRootProps } from './common-types';
+declare const BpkChatbotInputRoot: ({ align, children, gap, inputType, ...rest }: BpkChatbotInputRootProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkChatbotInputRoot;

package/bpk-component-chatbot-input/src/BpkChatbotInputRoot.js

@@ -0,0 +1,77 @@
+/*
+ * 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 { useCallback, useMemo, useState } from 'react';
+import { BpkVStack, BpkSpacing } from "../../bpk-component-layout";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
+import { BpkChatbotInputContext } from "./BpkChatbotInputContext";
+import { CHATBOT_INPUT_TYPES } from "./common-types";
+import STYLES from "./BpkChatbotInput.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkChatbotInputRoot = ({
+  align = 'flex-start',
+  children,
+  gap = BpkSpacing.Base,
+  inputType = CHATBOT_INPUT_TYPES.COMPOSER,
+  ...rest
+}) => {
+  const isCars = inputType === CHATBOT_INPUT_TYPES.CARS;
+  const isComposer = inputType === CHATBOT_INPUT_TYPES.COMPOSER;
+  const [isOverLimit, setIsOverLimit] = useState(false);
+  const stableSetIsOverLimit = useCallback(value => {
+    setIsOverLimit(value);
+  }, []);
+  const contextValue = useMemo(() => ({
+    inputType,
+    isOverLimit,
+    setIsOverLimit: stableSetIsOverLimit
+  }), [inputType, isOverLimit, stableSetIsOverLimit]);
+  const containerClassName = getClassName(isCars ? 'bpk-chatbot-input--cars' : 'bpk-chatbot-input--composer', isComposer && 'bpk-chatbot-input--composer--with-shadow', isOverLimit && !isCars && 'bpk-chatbot-input--composer--overLimit');
+  const paddingProps = isCars ? {
+    paddingTop: BpkSpacing.MD,
+    paddingBottom: BpkSpacing.MD,
+    paddingEnd: BpkSpacing.MD,
+    paddingStart: BpkSpacing.Base
+  } : {
+    padding: BpkSpacing.Base
+  };
+  const handleContainerEvent = e => {
+    e.stopPropagation();
+  };
+  return /*#__PURE__*/_jsx(BpkChatbotInputContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx("div", {
+      className: containerClassName,
+      onClick: handleContainerEvent,
+      onTouchStart: handleContainerEvent,
+      role: "presentation",
+      "data-testid": "bpk-chatbot-input-container",
+      ...getDataComponentAttribute('ChatbotInput'),
+      children: /*#__PURE__*/_jsx(BpkVStack, {
+        align: align,
+        gap: gap,
+        width: "100%",
+        ...paddingProps,
+        ...rest,
+        children: children
+      })
+    })
+  });
+};
+export default BpkChatbotInputRoot;

package/bpk-component-chatbot-input/src/BpkChatbotInputToolbar.d.ts

@@ -0,0 +1,3 @@
+import type { BpkChatbotInputToolbarProps } from './common-types';
+declare const BpkChatbotInputToolbar: ({ children, gap, ...rest }: BpkChatbotInputToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkChatbotInputToolbar;

package/bpk-component-chatbot-input/src/BpkChatbotInputToolbar.js

@@ -0,0 +1,33 @@
+/*
+ * 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 { BpkHStack, BpkSpacing } from "../../bpk-component-layout";
+import { getDataComponentAttribute } from "../../bpk-react-utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkChatbotInputToolbar = ({
+  children,
+  gap = BpkSpacing.Base,
+  ...rest
+}) => /*#__PURE__*/_jsx(BpkHStack, {
+  gap: gap,
+  width: "100%",
+  ...getDataComponentAttribute('ChatbotInput.Toolbar'),
+  ...rest,
+  children: children
+});
+export default BpkChatbotInputToolbar;

package/bpk-component-chatbot-input/src/TextAreaField/TextAreaField.d.ts

@@ -5,6 +5,7 @@ interface TextAreaFieldProps extends BaseInputFieldProps {
     isCapped: boolean;
     isExpanding: boolean;
     isComposer: boolean;
+    maxLines?: number;
 }
 declare const TextAreaField: import("react").ForwardRefExoticComponent<TextAreaFieldProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export default TextAreaField;

package/bpk-component-chatbot-input/src/TextAreaField/TextAreaField.js

@@ -30,6 +30,7 @@ const TextAreaField = /*#__PURE__*/forwardRef(({
   isComposer,
   isExpanding,
   isOverLimit = false,
+  maxLines,
   onInputBlur,
   onInputChange,
   onInputClick,
@@ -84,7 +85,10 @@ const TextAreaField = /*#__PURE__*/forwardRef(({
         rows: 1,
         style: {
           height: `${textareaHeight}px`,
-          resize: 'none'
+          resize: 'none',
+          ...(maxLines !== undefined && {
+            maxHeight: `${textareaHeight}px`
+          })
         }
       })]
     })

package/bpk-component-chatbot-input/src/common-types.d.ts

@@ -1,11 +1,19 @@
-import type { KeyboardEvent } from 'react';
+import type { KeyboardEvent, ReactElement, ReactNode } from 'react';
+import type { Props as BpkButtonProps } from '../../bpk-component-button';
+import type { BpkStackProps } from '../../bpk-component-layout';
 export declare const CHATBOT_INPUT_TYPES: {
     readonly CARS: "cars";
     readonly CARS_COMPOSER: "cars-composer";
     readonly COMPOSER: "composer";
 };
 export type ChatbotInputType = (typeof CHATBOT_INPUT_TYPES)[keyof typeof CHATBOT_INPUT_TYPES];
-export type BpkChatbotInputProps = {
+export type SendButtonRenderProps = {
+    disabled: boolean;
+    onClick: () => void;
+    loading: boolean;
+    ariaLabel: string;
+};
+export type BpkChatbotInputInputProps = {
     inputValue: string;
     /** Accessible label for the loading state button (required for screen readers). */
     loadingAriaLabel: string;
@@ -18,10 +26,22 @@ export type BpkChatbotInputProps = {
     placeholder: string;
     isSending?: boolean;
     isPolling?: boolean;
-    inputType?: ChatbotInputType;
     maxCharacters?: number;
+    /** Maximum number of visible lines before the textarea scrolls. Defaults to 4 (expanding to 5 when content exceeds 4 lines). Only applies to multiline input types. */
+    maxLines?: number;
     onInputClick?: () => void;
     onKeyDown?: (e: KeyboardEvent) => void;
+    /** Optional render prop for customising the send button. The consumer should return a BpkButton with the supplied props. When omitted, the default send button is used. */
+    renderSendButton?: (props: SendButtonRenderProps) => ReactElement<BpkButtonProps>;
+};
+export type BpkChatbotInputRootProps = BpkStackProps & {
+    inputType?: ChatbotInputType;
+};
+export type BpkChatbotInputToolbarProps = BpkStackProps;
+export type BpkChatbotInputNamespace = {
+    Root: (props: BpkChatbotInputRootProps) => ReactNode;
+    Input: (props: BpkChatbotInputInputProps) => ReactNode;
+    Toolbar: (props: BpkChatbotInputToolbarProps) => ReactNode;
 };
 export interface BaseInputFieldProps {
     value: string;

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

@@ -11,6 +11,7 @@ interface UseChatbotInputOptions {
     isPolling?: boolean;
     inputType?: ChatbotInputType;
     maxCharacters?: number;
+    maxLines?: number;
     onInputClick?: () => void;
     onKeyDown?: (e: KeyboardEvent) => void;
 }
@@ -28,5 +29,5 @@ interface UseChatbotInputReturn {
     textareaHeight: number;
     isCapped: boolean;
 }
-declare const useChatbotInput: ({ inputType, inputValue, isPolling, isSending, maxCharacters, onInputBlur, onInputChange, onInputClick, onInputFocus, onKeyDown, onSubmit, placeholder, }: UseChatbotInputOptions) => UseChatbotInputReturn;
+declare const useChatbotInput: ({ inputType, inputValue, isPolling, isSending, maxCharacters, maxLines, onInputBlur, onInputChange, onInputClick, onInputFocus, onKeyDown, onSubmit, placeholder, }: UseChatbotInputOptions) => UseChatbotInputReturn;
 export default useChatbotInput;

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

@@ -26,6 +26,7 @@ const useChatbotInput = ({
   isPolling = false,
   isSending = false,
   maxCharacters = MAX_CHARACTERS,
+  maxLines,
   onInputBlur,
   onInputChange,
   onInputClick = () => {},
@@ -48,7 +49,8 @@ const useChatbotInput = ({
   } = useTextAreaAutoResize({
     ref: inputRef,
     value: inputValue,
-    enabled: isMultiLine
+    enabled: isMultiLine,
+    maxLines
   });
   const handleSubmit = useCallback(() => {
     if (inputValue.trim() && !isDisabled && !isOverLimit) {

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-navigation-bar/src/BpkNavigationBar.d.ts

@@ -10,6 +10,9 @@ export type Props = {
     title: ReactNode;
     titleTextStyle?: TextStyle;
     titleTagName?: Tag;
+    /** When true, prevents the title from being truncated with an ellipsis and allows it to wrap onto multiple lines.
+     * Note: this prop only applies when `title` is a string; ReactNode titles are not truncated and wrap naturally. */
+    wrapTitle?: boolean;
     className?: string;
     leadingButton?: ReactElement | null;
     trailingButton?: ReactElement | null;

package/bpk-component-navigation-bar/src/BpkNavigationBar.js

@@ -36,6 +36,7 @@ const BpkNavigationBar = props => {
     titleTagName = "span",
     titleTextStyle = TEXT_STYLES.heading5,
     trailingButton,
+    wrapTitle = false,
     ...rest
   } = props;
 
@@ -51,7 +52,7 @@ const BpkNavigationBar = props => {
       className: getClassNames('bpk-navigation-bar__leading-item', `bpk-navigation-bar__leading-item--${barStyle}`),
       children: leadingButton
     }), typeof title === 'string' ? /*#__PURE__*/_jsx("span", {
-      className: getClassNames('bpk-navigation-bar__title', `bpk-navigation-bar__title--${barStyle}`),
+      className: getClassNames('bpk-navigation-bar__title', `bpk-navigation-bar__title--${barStyle}`, wrapTitle && 'bpk-navigation-bar__title--wrap'),
       children: /*#__PURE__*/_jsx(BpkText, {
         id: titleId,
         textStyle: titleTextStyle,

package/bpk-component-navigation-bar/src/BpkNavigationBar.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-navigation-bar{position:relative;display:grid;min-height:3.5rem;padding:1rem;grid-template-rows:auto;grid-template-columns:minmax(1.5rem, auto) minmax(1rem, 1fr) minmax(1.5rem, auto);justify-content:space-between;align-items:center;gap:1rem;background-color:#fff;background-color:var(--bpk-navigation-bar-background-color, rgb(255, 255, 255))}.bpk-navigation-bar--on-dark{background-color:#05203c}.bpk-navigation-bar__title{grid-column:2;text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#161616;color:var(--bpk-navigation-bar-title-color, rgb(22, 22, 22))}.bpk-navigation-bar__title :first-child{display:inline}.bpk-navigation-bar__title--on-dark{color:#fff}.bpk-navigation-bar__title-container{justify-self:center}.bpk-navigation-bar__leading-item,.bpk-navigation-bar__trailing-item{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-navigation-bar__leading-item{grid-column:1;justify-self:start}.bpk-navigation-bar__trailing-item{grid-column:3;justify-self:end}.bpk-navigation-bar__sticky{position:sticky;top:0;z-index:899;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}
+.bpk-navigation-bar{position:relative;display:grid;min-height:3.5rem;padding:1rem;grid-template-rows:auto;grid-template-columns:minmax(1.5rem, auto) minmax(1rem, 1fr) minmax(1.5rem, auto);justify-content:space-between;align-items:center;gap:1rem;background-color:#fff;background-color:var(--bpk-navigation-bar-background-color, rgb(255, 255, 255))}.bpk-navigation-bar--on-dark{background-color:#05203c}.bpk-navigation-bar__title{grid-column:2;text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#161616;color:var(--bpk-navigation-bar-title-color, rgb(22, 22, 22))}.bpk-navigation-bar__title :first-child{display:inline}.bpk-navigation-bar__title--on-dark{color:#fff}.bpk-navigation-bar__title--wrap{text-overflow:unset;white-space:normal;overflow:visible}.bpk-navigation-bar__title-container{justify-self:center}.bpk-navigation-bar__leading-item,.bpk-navigation-bar__trailing-item{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-navigation-bar__leading-item{grid-column:1;justify-self:start}.bpk-navigation-bar__trailing-item{grid-column:3;justify-self:end}.bpk-navigation-bar__sticky{position:sticky;top:0;z-index:899;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}

package/bpk-component-page-indicator/src/NavButton.js

@@ -17,7 +17,7 @@
  */
 
 import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
-import { withButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
+import { withLargeButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
 import LeftArrowIcon from "../../bpk-component-icon/lg/chevron-left";
 import RightArrowIcon from "../../bpk-component-icon/lg/chevron-right";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -26,8 +26,8 @@ export const DIRECTIONS = {
   INDICATORS: 'INDICATORS',
   NEXT: 'NEXT'
 };
-const AlignedLeftArrowIcon = withButtonAlignment(withRtlSupport(LeftArrowIcon));
-const AlignedRightArrowIcon = withButtonAlignment(withRtlSupport(RightArrowIcon));
+const AlignedLeftArrowIcon = withLargeButtonAlignment(withRtlSupport(LeftArrowIcon));
+const AlignedRightArrowIcon = withLargeButtonAlignment(withRtlSupport(RightArrowIcon));
 const NavButton = ({
   ariaLabel,
   currentIndex,

package/package.json

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

package/bpk-component-chatbot-input/src/SendButton/SendButton.d.ts

@@ -1,9 +0,0 @@
-export interface SendButtonProps {
-    ariaLabel: string;
-    isCars?: boolean;
-    disabled?: boolean;
-    isLoading?: boolean;
-    onClick: () => void;
-}
-declare const SendButton: ({ ariaLabel, disabled, isCars, isLoading, onClick, }: SendButtonProps) => import("react/jsx-runtime").JSX.Element;
-export default SendButton;

package/bpk-component-chatbot-input/src/SendButton/SendButton.js

@@ -1,47 +0,0 @@
-/*
- * 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 BpkButton, { BUTTON_TYPES, SIZE_TYPES } from "../../../bpk-component-button";
-import { withRtlSupport, withButtonAlignment } from "../../../bpk-component-icon";
-import ArrowRightIcon from "../../../bpk-component-icon/sm/long-arrow-right";
-import ArrowUpIcon from "../../../bpk-component-icon/sm/long-arrow-up";
-import { jsx as _jsx } from "react/jsx-runtime";
-const AlignedArrowRightIcon = withButtonAlignment(withRtlSupport(ArrowRightIcon));
-const AlignedArrowUpIcon = withButtonAlignment(ArrowUpIcon);
-const SendButton = ({
-  ariaLabel,
-  disabled = false,
-  isCars = true,
-  isLoading = false,
-  onClick
-}) => {
-  const buttonType = isCars ? BUTTON_TYPES.featured : BUTTON_TYPES.primary;
-  const Icon = isCars ? AlignedArrowRightIcon : AlignedArrowUpIcon;
-  return /*#__PURE__*/_jsx(BpkButton, {
-    type: buttonType,
-    size: SIZE_TYPES.small,
-    iconOnly: true,
-    loading: isLoading,
-    onClick: onClick,
-    disabled: disabled,
-    "aria-label": ariaLabel,
-    "data-testid": isLoading ? 'bpk-chatbot-input-loading' : 'bpk-chatbot-input-send',
-    children: /*#__PURE__*/_jsx(Icon, {})
-  });
-};
-export default SendButton;