@skyscanner/backpack-web 42.1.0 → 42.3.0

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

@@ -0,0 +1,118 @@
+/*
+ * 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 { 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)
+      })]
+    })
+  });
+};
+export default BpkChatbotInput;

package/bpk-component-chatbot-input/src/BpkChatbotInput.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-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)}

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

@@ -0,0 +1,3 @@
+import type { BaseInputFieldProps } from '../common-types';
+declare const InputField: import("react").ForwardRefExoticComponent<BaseInputFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export default InputField;

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

@@ -0,0 +1,82 @@
+/*
+ * 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 { forwardRef, useId } from 'react';
+import { cssModules } from "../../../bpk-react-utils";
+import { useInputHandlers } from "../hooks";
+import STYLES from "./InputField.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const InputField = /*#__PURE__*/forwardRef(({
+  dataTestId,
+  disabled = false,
+  onInputBlur,
+  onInputChange,
+  onInputClick,
+  onInputFocus,
+  onKeyDown,
+  placeholder,
+  value
+}, ref) => {
+  const {
+    handleInputChange,
+    handleInputClick,
+    handleTouchEnd,
+    handleTouchStart
+  } = useInputHandlers(ref, onInputChange, onInputClick);
+  const id = useId();
+  const handleWrapperEvent = e => {
+    e.stopPropagation();
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: getClassName('bpk-chatbot-input-field'),
+    onClick: handleWrapperEvent,
+    onTouchStart: handleWrapperEvent,
+    role: "presentation",
+    children: [/*#__PURE__*/_jsx("label", {
+      htmlFor: id,
+      className: getClassName('bpk-chatbot-input-field__label'),
+      children: placeholder
+    }), /*#__PURE__*/_jsx("input", {
+      ref: ref,
+      id: id,
+      type: "text",
+      className: getClassName('bpk-chatbot-input-field__input'),
+      placeholder: placeholder,
+      value: value,
+      onChange: handleInputChange,
+      onKeyDown: onKeyDown,
+      onFocus: onInputFocus,
+      onBlur: onInputBlur,
+      onClick: handleInputClick,
+      onTouchStart: handleTouchStart,
+      onTouchEnd: handleTouchEnd,
+      disabled: disabled,
+      "aria-label": placeholder,
+      autoComplete: "off",
+      autoCorrect: "off",
+      autoCapitalize: "sentences",
+      spellCheck: "true",
+      tabIndex: 0,
+      inputMode: "text",
+      enterKeyHint: "send",
+      "data-testid": dataTestId
+    })]
+  });
+});
+export default InputField;

package/bpk-component-chatbot-input/src/InputField/InputField.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-chatbot-input-field{position:relative;min-width:0;flex:1;cursor:text;overflow:visible;touch-action:manipulation}.bpk-chatbot-input-field__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-chatbot-input-field__input{width:100%;padding:0;border:none;outline:none;background:rgba(0,0,0,0);color:#161616;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;appearance:none;box-sizing:border-box;caret-color:#0062e3;touch-action:manipulation;font-size:.875rem;line-height:1.25rem;font-weight:400}@media(max-width: 32rem){.bpk-chatbot-input-field__input{font-size:1rem;line-height:1.5rem;font-weight:400}}.bpk-chatbot-input-field__input::placeholder{color:#626971;opacity:1}.bpk-chatbot-input-field__input:disabled{color:rgba(0,0,0,.2);cursor:not-allowed;opacity:1}

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,47 @@
+/*
+ * 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;

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

@@ -0,0 +1,10 @@
+import type { BaseInputFieldProps } from '../common-types';
+interface TextAreaFieldProps extends BaseInputFieldProps {
+    containerHeight: number;
+    textareaHeight: number;
+    isCapped: boolean;
+    isExpanding: boolean;
+    isComposer: boolean;
+}
+declare const TextAreaField: import("react").ForwardRefExoticComponent<TextAreaFieldProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export default TextAreaField;

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

@@ -0,0 +1,93 @@
+/*
+ * 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 { forwardRef, useId } from 'react';
+import { cssModules } from "../../../bpk-react-utils";
+import { useInputHandlers } from "../hooks";
+import STYLES from "./TextAreaField.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const TextAreaField = /*#__PURE__*/forwardRef(({
+  containerHeight,
+  dataTestId,
+  disabled = false,
+  isCapped,
+  isComposer,
+  isExpanding,
+  isOverLimit = false,
+  onInputBlur,
+  onInputChange,
+  onInputClick,
+  onInputFocus,
+  onKeyDown,
+  placeholder,
+  textareaHeight,
+  value
+}, ref) => {
+  const {
+    handleInputChange,
+    handleInputClick,
+    handleTouchEnd,
+    handleTouchStart
+  } = useInputHandlers(ref, onInputChange, onInputClick);
+  const id = useId();
+  return /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-chatbot-textarea-field__container', {
+      'bpk-chatbot-textarea-field__container--expanding': isExpanding,
+      'bpk-chatbot-textarea-field__container--overLimit': isOverLimit
+    }),
+    style: {
+      height: `${containerHeight}px`
+    },
+    children: /*#__PURE__*/_jsxs("div", {
+      className: getClassName('bpk-chatbot-textarea-field__field', isCapped && 'bpk-chatbot-textarea-field__field--capped'),
+      children: [/*#__PURE__*/_jsx("label", {
+        htmlFor: id,
+        className: getClassName('bpk-chatbot-textarea-field__label'),
+        children: placeholder
+      }), /*#__PURE__*/_jsx("textarea", {
+        ref: ref,
+        id: id,
+        className: getClassName('bpk-chatbot-textarea-field__textarea', isComposer && 'bpk-chatbot-textarea-field__textarea--with-shadow'),
+        placeholder: placeholder,
+        value: value,
+        onChange: handleInputChange,
+        onKeyDown: onKeyDown,
+        onFocus: onInputFocus,
+        onBlur: onInputBlur,
+        onClick: handleInputClick,
+        onTouchStart: handleTouchStart,
+        onTouchEnd: handleTouchEnd,
+        disabled: disabled,
+        "aria-label": placeholder,
+        autoComplete: "off",
+        autoCorrect: "off",
+        autoCapitalize: "sentences",
+        spellCheck: "true",
+        tabIndex: 0,
+        "data-testid": dataTestId,
+        rows: 1,
+        style: {
+          height: `${textareaHeight}px`,
+          resize: 'none'
+        }
+      })]
+    })
+  });
+});
+export default TextAreaField;

package/bpk-component-chatbot-input/src/TextAreaField/TextAreaField.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-chatbot-textarea-field__container{position:relative;display:flex;width:100%;align-items:center;transition:height .3s cubic-bezier(0.4, 0, 0.2, 1),padding .3s cubic-bezier(0.4, 0, 0.2, 1),transform .3s cubic-bezier(0.4, 0, 0.2, 1);will-change:height,padding,transform}.bpk-chatbot-textarea-field__container--expanding{align-items:flex-start}.bpk-chatbot-textarea-field__container--overLimit{padding-top:1rem;align-items:flex-end}.bpk-chatbot-textarea-field__field{position:relative;display:flex;width:100%;min-width:0;align-items:center;flex:1;cursor:text;overflow:visible}.bpk-chatbot-textarea-field__field--capped{padding-bottom:1rem}.bpk-chatbot-textarea-field__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-chatbot-textarea-field__textarea{width:100%;height:1.5rem;min-height:1.5rem;max-height:6.875rem;margin:0;padding:0;transition:height .3s cubic-bezier(0.4, 0, 0.2, 1),transform .3s cubic-bezier(0.4, 0, 0.2, 1),opacity .3s cubic-bezier(0.4, 0, 0.2, 1);border:none;outline:none;background:rgba(0,0,0,0);color:#161616;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;caret-color:#0062e3;overflow-wrap:break-word;resize:none;scrollbar-width:none;word-wrap:break-word;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-chatbot-textarea-field__textarea::placeholder{color:#626971;opacity:1}.bpk-chatbot-textarea-field__textarea:disabled{color:rgba(0,0,0,.2);cursor:not-allowed;opacity:.6}.bpk-chatbot-textarea-field__textarea::-webkit-scrollbar{display:none}.bpk-chatbot-textarea-field__textarea--with-shadow::placeholder{color:#161616}.bpk-chatbot-textarea-field__textarea--with-shadow:focus::placeholder{opacity:0}

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

@@ -0,0 +1,37 @@
+import type { KeyboardEvent } from 'react';
+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 = {
+    inputValue: string;
+    /** Accessible label for the loading state button (required for screen readers). */
+    loadingAriaLabel: string;
+    /** Accessible label for the send button (required for screen readers). */
+    sendAriaLabel: string;
+    onInputChange: (value: string) => void;
+    onInputFocus: () => void;
+    onInputBlur: () => void;
+    onSubmit: () => void | Promise<void>;
+    placeholder: string;
+    isSending?: boolean;
+    isPolling?: boolean;
+    inputType?: ChatbotInputType;
+    maxCharacters?: number;
+    onInputClick?: () => void;
+    onKeyDown?: (e: KeyboardEvent) => void;
+};
+export interface BaseInputFieldProps {
+    value: string;
+    placeholder: string;
+    disabled?: boolean;
+    isOverLimit?: boolean;
+    dataTestId: string;
+    onInputChange: (value: string) => void;
+    onInputFocus: () => void;
+    onInputBlur: () => void;
+    onInputClick: () => void;
+    onKeyDown: (e: KeyboardEvent) => void;
+}

package/bpk-component-chatbot-input/src/common-types.js

@@ -0,0 +1,23 @@
+/*
+ * 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 CHATBOT_INPUT_TYPES = {
+  CARS: 'cars',
+  CARS_COMPOSER: 'cars-composer',
+  COMPOSER: 'composer'
+};

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

@@ -0,0 +1,5 @@
+export declare const MAX_CHARACTERS = 500;
+declare const _default: {
+    MAX_CHARACTERS: number;
+};
+export default _default;

package/bpk-component-chatbot-input/src/constants.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 MAX_CHARACTERS = 500;
+export default {
+  MAX_CHARACTERS
+};

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

@@ -0,0 +1,4 @@
+export { default as useChatbotInput } from './useChatbotInput';
+export { default as useChatbotInputManager } from './useChatbotInputManager';
+export { default as useInputHandlers } from './useInputHandlers';
+export { default as useTextAreaAutoResize } from './useTextAreaAutoResize';

package/bpk-component-chatbot-input/src/hooks/index.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 { default as useChatbotInput } from "./useChatbotInput";
+export { default as useChatbotInputManager } from "./useChatbotInputManager";
+export { default as useInputHandlers } from "./useInputHandlers";
+export { default as useTextAreaAutoResize } from "./useTextAreaAutoResize";

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

@@ -0,0 +1,32 @@
+import type { KeyboardEvent, RefObject } from 'react';
+import type { BaseInputFieldProps, ChatbotInputType } from '../common-types';
+interface UseChatbotInputOptions {
+    inputValue: string;
+    onInputChange: (value: string) => void;
+    onInputFocus: () => void;
+    onInputBlur: () => void;
+    onSubmit: () => void | Promise<void>;
+    placeholder: string;
+    isSending?: boolean;
+    isPolling?: boolean;
+    inputType?: ChatbotInputType;
+    maxCharacters?: number;
+    onInputClick?: () => void;
+    onKeyDown?: (e: KeyboardEvent) => void;
+}
+interface UseChatbotInputReturn {
+    inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement>;
+    isFocused: boolean;
+    isDisabled: boolean;
+    isOverLimit: boolean;
+    isExpanding: boolean;
+    isCars: boolean;
+    sendButtonDisabled: boolean;
+    inputProps: BaseInputFieldProps;
+    handleSubmit: () => void;
+    containerHeight: number;
+    textareaHeight: number;
+    isCapped: boolean;
+}
+declare const useChatbotInput: ({ inputType, inputValue, isPolling, isSending, maxCharacters, onInputBlur, onInputChange, onInputClick, onInputFocus, onKeyDown, onSubmit, placeholder, }: UseChatbotInputOptions) => UseChatbotInputReturn;
+export default useChatbotInput;