@skyscanner/backpack-web 42.1.0 → 42.2.0

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.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;

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

@@ -0,0 +1,111 @@
+/*
+ * 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, useRef, useState } from 'react';
+import { CHATBOT_INPUT_TYPES } from "../common-types";
+import { MAX_CHARACTERS } from "../constants";
+import useTextAreaAutoResize from "./useTextAreaAutoResize";
+const useChatbotInput = ({
+  inputType = CHATBOT_INPUT_TYPES.COMPOSER,
+  inputValue,
+  isPolling = false,
+  isSending = false,
+  maxCharacters = MAX_CHARACTERS,
+  onInputBlur,
+  onInputChange,
+  onInputClick = () => {},
+  onInputFocus,
+  onKeyDown = () => {},
+  onSubmit,
+  placeholder
+}) => {
+  const isCars = inputType === CHATBOT_INPUT_TYPES.CARS;
+  const isMultiLine = inputType === CHATBOT_INPUT_TYPES.CARS_COMPOSER || inputType === CHATBOT_INPUT_TYPES.COMPOSER;
+  const inputRef = useRef(null);
+  const [isFocused, setIsFocused] = useState(false);
+  const isOverLimit = inputValue.length > maxCharacters;
+  const isDisabled = isSending || isPolling;
+  const {
+    containerHeight,
+    isCapped,
+    isExpanding,
+    textareaHeight
+  } = useTextAreaAutoResize({
+    ref: inputRef,
+    value: inputValue,
+    enabled: isMultiLine
+  });
+  const handleSubmit = useCallback(() => {
+    if (inputValue.trim() && !isDisabled && !isOverLimit) {
+      onSubmit();
+    }
+  }, [inputValue, onSubmit, isDisabled, isOverLimit]);
+  const handleKeyDown = useCallback(e => {
+    if (e.key === 'Enter') {
+      if (!isMultiLine) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleSubmit();
+        return;
+      }
+      if (!e.shiftKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleSubmit();
+        return;
+      }
+    }
+    onKeyDown?.(e);
+  }, [isMultiLine, handleSubmit, onKeyDown]);
+  const handleInputFocus = useCallback(() => {
+    setIsFocused(true);
+    onInputFocus();
+  }, [onInputFocus]);
+  const handleInputBlur = useCallback(() => {
+    setIsFocused(false);
+    onInputBlur();
+  }, [onInputBlur]);
+  const inputProps = {
+    value: inputValue,
+    placeholder,
+    disabled: isDisabled,
+    isOverLimit,
+    onInputChange,
+    onInputFocus: handleInputFocus,
+    onInputBlur: handleInputBlur,
+    onInputClick,
+    onKeyDown: handleKeyDown,
+    dataTestId: isMultiLine ? 'bpk-chatbot-textarea-field' : 'bpk-chatbot-input-field'
+  };
+  const sendButtonDisabled = isCars ? isFocused && !inputValue.trim() || isDisabled || isOverLimit : !inputValue.trim() || isDisabled || isOverLimit;
+  return {
+    inputRef,
+    isFocused,
+    isDisabled,
+    isOverLimit,
+    isExpanding,
+    isCars,
+    sendButtonDisabled,
+    inputProps,
+    handleSubmit,
+    containerHeight,
+    textareaHeight,
+    isCapped
+  };
+};
+export default useChatbotInput;

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

@@ -0,0 +1,20 @@
+interface UseChatbotInputManagerOptions {
+    isSending?: boolean;
+    onSubmit: (value: string) => void;
+    sendMessage?: (message: string) => Promise<void>;
+    onPromptClick?: (id: string, promptText?: string) => void;
+    isModalOpen?: boolean;
+    autoClearOnSendingComplete?: boolean;
+    autoClearOnModalClose?: boolean;
+    autoClearOnClose?: boolean;
+    isOpen?: boolean;
+}
+interface UseChatbotInputManagerReturn {
+    inputValue: string;
+    setInputValue: (value: string) => void;
+    handleInputChange: (value: string) => void;
+    handleSubmit: () => Promise<void> | void;
+    handlePromptClick?: (id: string, promptText?: string) => void;
+}
+declare const useChatbotInputManager: ({ autoClearOnClose, autoClearOnModalClose, autoClearOnSendingComplete, isModalOpen, isOpen, isSending, onPromptClick, onSubmit, sendMessage, }: UseChatbotInputManagerOptions) => UseChatbotInputManagerReturn;
+export default useChatbotInputManager;

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

@@ -0,0 +1,83 @@
+/*
+ * 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 { useState, useEffect, useRef, useCallback } from 'react';
+const useChatbotInputManager = ({
+  autoClearOnClose = false,
+  autoClearOnModalClose = false,
+  autoClearOnSendingComplete = false,
+  isModalOpen = false,
+  isOpen,
+  isSending = false,
+  onPromptClick,
+  onSubmit,
+  sendMessage
+}) => {
+  const [inputValue, setInputValue] = useState('');
+  const previousIsSending = useRef(isSending);
+  const previousIsModalOpen = useRef(isModalOpen);
+  const previousIsOpen = useRef(isOpen);
+  useEffect(() => {
+    if (autoClearOnSendingComplete && previousIsSending.current && !isSending) {
+      setInputValue('');
+    }
+    previousIsSending.current = isSending;
+  }, [isSending, autoClearOnSendingComplete]);
+  useEffect(() => {
+    if (autoClearOnModalClose && previousIsModalOpen.current && !isModalOpen) {
+      setInputValue('');
+    }
+    previousIsModalOpen.current = isModalOpen;
+  }, [isModalOpen, autoClearOnModalClose]);
+  useEffect(() => {
+    if (autoClearOnClose && previousIsOpen.current && !isOpen) {
+      setInputValue('');
+    }
+    previousIsOpen.current = isOpen;
+  }, [isOpen, autoClearOnClose]);
+  const handleInputChange = useCallback(value => {
+    setInputValue(value);
+  }, []);
+  const handleSubmit = useCallback(async () => {
+    const userMessage = inputValue.trim();
+    if (!userMessage || isSending) {
+      return;
+    }
+    setInputValue('');
+    onSubmit(userMessage);
+    if (sendMessage) {
+      await sendMessage(userMessage);
+    }
+  }, [inputValue, isSending, onSubmit, sendMessage]);
+  const handlePromptClick = useCallback((id, promptText) => {
+    if (promptText && !isSending && onPromptClick) {
+      setInputValue(promptText);
+    }
+    onPromptClick?.(id, promptText);
+  }, [isSending, onPromptClick]);
+  return {
+    inputValue,
+    setInputValue,
+    handleInputChange,
+    handleSubmit,
+    ...(onPromptClick && {
+      handlePromptClick
+    })
+  };
+};
+export default useChatbotInputManager;

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

@@ -0,0 +1,8 @@
+import type { ChangeEvent, ForwardedRef, MouseEvent, TouchEvent } from 'react';
+declare const useInputHandlers: <T extends HTMLInputElement | HTMLTextAreaElement>(ref: ForwardedRef<T>, onInputChange: (value: string) => void, onInputClick: () => void) => {
+    handleInputChange: (e: ChangeEvent<T>) => void;
+    handleInputClick: (e: MouseEvent<T>) => void;
+    handleTouchStart: (e: TouchEvent<T>) => void;
+    handleTouchEnd: (e: TouchEvent<T>) => void;
+};
+export default useInputHandlers;

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

@@ -0,0 +1,54 @@
+/*
+ * 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, useRef } from 'react';
+const useInputHandlers = (ref, onInputChange, onInputClick) => {
+  const touchStartTargetRef = useRef(null);
+  const handleInputChange = useCallback(e => {
+    onInputChange(e.target.value);
+  }, [onInputChange]);
+  const handleInputClick = useCallback(e => {
+    e.stopPropagation();
+    if (ref && typeof ref !== 'function' && ref.current && !ref.current.disabled) {
+      ref.current.focus();
+      onInputClick();
+    }
+  }, [onInputClick, ref]);
+  const handleTouchStart = useCallback(e => {
+    e.stopPropagation();
+    touchStartTargetRef.current = e.target;
+  }, []);
+  const handleTouchEnd = useCallback(e => {
+    e.stopPropagation();
+    if (touchStartTargetRef.current === e.target) {
+      if (ref && typeof ref !== 'function' && ref.current && !ref.current.disabled) {
+        e.preventDefault();
+        ref.current.focus();
+        onInputClick();
+      }
+    }
+    touchStartTargetRef.current = null;
+  }, [onInputClick, ref]);
+  return {
+    handleInputChange,
+    handleInputClick,
+    handleTouchStart,
+    handleTouchEnd
+  };
+};
+export default useInputHandlers;

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

@@ -0,0 +1,22 @@
+import type { RefObject } from 'react';
+interface UseTextAreaAutoResizeProps {
+    ref: RefObject<HTMLTextAreaElement>;
+    value: string;
+    enabled?: boolean;
+}
+interface UseTextAreaAutoResizeReturn {
+    isExpanding: boolean;
+    textareaHeight: number;
+    containerHeight: number;
+    isCapped: boolean;
+    scrollToBottom: () => void;
+}
+export declare const LINE_HEIGHT = 24;
+export declare const MIN_INPUT_HEIGHT = 24;
+export declare const MAX_INPUT_HEIGHT_PHASE_1: number;
+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;
+export default useTextAreaAutoResize;