@mitodl/smoot-design 3.0.1 → 3.2.0

package/dist/esm/components/AiChat/AiChat.js

@@ -11,28 +11,25 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from "react";
 import styled from "@emotion/styled";
-import Skeleton from "@mui/material/Skeleton";
-import { Input } from "../Input/Input";
+import { Input, AdornmentButton } from "../Input/Input";
 import { ActionButton } from "../Button/ActionButton";
-import { RiCloseLine, RiRobot2Line, RiSendPlaneFill } from "@remixicon/react";
+import { RiCloseLine, RiRobot2Line, RiSendPlaneFill, RiStopFill, RiSparkling2Line, RiMoreFill, } from "@remixicon/react";
 import { useAiChat } from "./utils";
 import Markdown from "react-markdown";
 import { ScrollSnap } from "../ScrollSnap/ScrollSnap";
 import classNames from "classnames";
 import { SrAnnouncer } from "../SrAnnouncer/SrAnnouncer";
-import mascot from "../../../static/images/mit_mascot_tim.png";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden";
-import { ImageAdapter } from "../ImageAdapter/ImageAdapter";
 import Typography from "@mui/material/Typography";
 const classes = {
     root: "MitAiChat--root",
+    title: "MitAiChat--title",
     conversationStarter: "MitAiChat--conversationStarter",
     messagesContainer: "MitAiChat--messagesContainer",
     messageRow: "MitAiChat--messageRow",
     messageRowUser: "MitAiChat--messageRowUser",
     messageRowAssistant: "MitAiChat--messageRowAssistant",
     message: "MitAiChat--message",
-    avatar: "MitAiChat--avatar",
     input: "MitAiChat--input",
 };
 const ChatContainer = styled.div({
@@ -41,19 +38,30 @@ const ChatContainer = styled.div({
     display: "flex",
     flexDirection: "column",
 });
-const MessagesContainer = styled(ScrollSnap)(({ theme }) => ({
+const AskTimTitle = styled.div(({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    color: theme.custom.colors.darkGray2,
+    img: {
+        width: "24px",
+        height: "24px",
+    },
+    svg: {
+        fill: theme.custom.colors.red,
+        width: "24px",
+        height: "24px",
+    },
+}));
+const MessagesContainer = styled(ScrollSnap)({
     display: "flex",
     flexDirection: "column",
     flex: 1,
-    padding: "24px",
-    paddingBottom: "12px",
+    paddingTop: "14px",
+    paddingBottom: "24px",
     overflow: "auto",
     gap: "24px",
-    backgroundColor: theme.custom.colors.lightGray1,
-    borderColor: theme.custom.colors.silverGrayLight,
-    borderStyle: "solid",
-    borderWidth: "0 1px",
-}));
+});
 const MessageRow = styled.div({
     display: "flex",
     width: "100%",
@@ -66,45 +74,25 @@ const MessageRow = styled.div({
     },
     position: "relative",
 });
-const Avatar = styled.div(({ theme }) => ({
-    flexShrink: 0,
-    borderRadius: "50%",
-    backgroundColor: theme.custom.colors.white,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    img: {
-        width: "66%",
-        // This is the default, but NextJS adds a height attribute to images
-        // The attr is useful for aspect ratio, but we want the actual CSS size to
-        // be auto.
-        height: "auto",
-    },
-    width: "32px",
-    height: "32px",
-    position: "absolute",
-    top: "-16px",
-    [`.${classes.messageRowAssistant} &`]: {
-        left: "-10px",
-    },
-    [`.${classes.messageRowUser} &`]: {
-        right: "16px",
-    },
-}));
-const Message = styled.div(({ theme }) => (Object.assign(Object.assign({ border: `1px solid ${theme.custom.colors.silverGrayLight}`, backgroundColor: theme.custom.colors.white, padding: "12px" }, theme.typography.body2), { "p:first-of-type": {
+const Message = styled.div(({ theme }) => (Object.assign(Object.assign({ backgroundColor: theme.custom.colors.white, padding: "12px 16px" }, theme.typography.body2), { "p:first-of-type": {
         marginTop: 0,
     }, "p:last-of-type": {
         marginBottom: 0,
     }, a: {
-        color: theme.custom.colors.mitRed,
-        textDecoration: "none",
-    }, "a:hover": {
         color: theme.custom.colors.red,
-        textDecoration: "underline",
+        fontWeight: "normal",
     }, borderRadius: "12px", [`.${classes.messageRowAssistant} &`]: {
-        borderRadius: "0 12px 12px 12px",
+        border: `1px solid ${theme.custom.colors.lightGray2}`,
+        color: theme.custom.colors.darkGray2,
+        borderRadius: "0px 8px 8px 8px",
+        svg: {
+            fill: theme.custom.colors.silverGrayDark,
+            display: "block",
+        },
     }, [`.${classes.messageRowUser} &`]: {
-        borderRadius: "12px 0 12px 12px",
+        borderRadius: "8px 0px 8px 8px",
+        color: theme.custom.colors.white,
+        backgroundColor: theme.custom.colors.silverGrayDark,
     } })));
 const StarterContainer = styled.div({
     alignSelf: "flex-end",
@@ -113,74 +101,63 @@ const StarterContainer = styled.div({
     flexDirection: "column",
     gap: "12px",
 });
-const Starter = styled.button(({ theme }) => (Object.assign(Object.assign({ border: `1px solid ${theme.custom.colors.silverGrayLight}`, backgroundColor: theme.custom.colors.white, padding: "8px 16px" }, theme.typography.subtitle3), { cursor: "pointer", "&:hover": {
-        backgroundColor: theme.custom.colors.lightGray1,
-    }, borderRadius: "100vh" })));
-const InputStyled = styled(Input)({
-    borderRadius: "0 0 8px 8px",
-});
-const ActionButtonStyled = styled(ActionButton)(({ theme }) => ({
-    backgroundColor: theme.custom.colors.red,
-    flexShrink: 0,
-    marginRight: "24px",
-    marginLeft: "12px",
-    "&:hover:not(:disabled)": {
-        backgroundColor: theme.custom.colors.mitRed,
-    },
-}));
-const DotsContainer = styled.span(({ theme }) => ({
-    display: "inline-flex",
-    gap: "4px",
-    ".MuiSkeleton-root": {
-        backgroundColor: theme.custom.colors.silverGray,
-    },
-}));
-const Dots = () => {
-    return (React.createElement(DotsContainer, null,
-        React.createElement(Skeleton, { variant: "circular", width: "8px", height: "8px" }),
-        React.createElement(Skeleton, { variant: "circular", width: "8px", height: "8px" }),
-        React.createElement(Skeleton, { variant: "circular", width: "8px", height: "8px" })));
-};
-const CloseButton = styled(ActionButton)(({ theme }) => ({
-    color: "inherit",
-    backgroundColor: theme.custom.colors.red,
-    "&:hover:not(:disabled)": {
-        backgroundColor: theme.custom.colors.mitRed,
-    },
-}));
+const Starter = styled.button(({ theme }) => (Object.assign(Object.assign({ border: `1px solid ${theme.custom.colors.lightGray2}`, backgroundColor: theme.custom.colors.white, padding: "8px 16px" }, theme.typography.body3), { cursor: "pointer", boxSizing: "border-box", "&:hover": {
+        color: theme.custom.colors.white,
+        backgroundColor: theme.custom.colors.silverGrayDark,
+        borderColor: "transparent",
+    }, borderRadius: "8px" })));
 const RobotIcon = styled(RiRobot2Line)({
     width: "40px",
     height: "40px",
 });
-const ChatTitle = styled(({ title, onClose, className }) => {
+const StyledInput = styled(Input)(({ theme }) => ({
+    backgroundColor: theme.custom.colors.lightGray1,
+    borderRadius: "8px",
+    border: `1px solid ${theme.custom.colors.lightGray2}`,
+}));
+const StyledSendButton = styled(RiSendPlaneFill)(({ theme }) => ({
+    fill: theme.custom.colors.red,
+}));
+const StyledStopButton = styled(RiStopFill)(({ theme }) => ({
+    fill: theme.custom.colors.red,
+}));
+const ChatTitle = styled(({ title, askTimTitle, onClose, className }) => {
     return (React.createElement("div", { className: className },
-        React.createElement(RobotIcon, null),
-        React.createElement(Typography, { flex: 1, variant: "h5" }, title),
-        onClose ? (React.createElement(CloseButton, { variant: "text", onClick: onClose, "aria-label": "Close chat" },
+        askTimTitle ? (React.createElement(AskTimTitle, null,
+            React.createElement(RiSparkling2Line, null),
+            React.createElement(Typography, { variant: "body1" },
+                "Ask",
+                React.createElement("strong", null, "TIM"),
+                "\u00A0",
+                askTimTitle))) : null,
+        title ? (React.createElement(React.Fragment, null,
+            React.createElement(RobotIcon, null),
+            React.createElement(Typography, { flex: 1, variant: "h5" }, title))) : null,
+        onClose ? (React.createElement(ActionButton, { variant: "text", edge: "none", onClick: onClose, "aria-label": "Close chat" },
             React.createElement(RiCloseLine, null))) : null));
 })(({ theme }) => ({
-    backgroundColor: theme.custom.colors.red,
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    padding: "12px 24px",
+    padding: "12px 0",
     gap: "16px",
     color: theme.custom.colors.white,
     borderRadius: "8px 8px 0 0",
 }));
 const AiChatInternal = function AiChat(_a) {
-    var _b;
-    var { chatId, className, conversationStarters, requestOpts, initialMessages: initMsgs, parseContent, srLoadingMessages, title, onClose, ImgComponent, placeholder = "Type a message..." } = _a, others = __rest(_a, ["chatId", "className", "conversationStarters", "requestOpts", "initialMessages", "parseContent", "srLoadingMessages", "title", "onClose", "ImgComponent", "placeholder"]) // Could contain data attributes
+    var _b, _c;
+    var { chatId, className, conversationStarters, requestOpts, initialMessages: initMsgs, parseContent, srLoadingMessages, title, askTimTitle, onClose, ImgComponent, placeholder = "", ref } = _a, others = __rest(_a, ["chatId", "className", "conversationStarters", "requestOpts", "initialMessages", "parseContent", "srLoadingMessages", "title", "askTimTitle", "onClose", "ImgComponent", "placeholder", "ref"]) // Could contain data attributes
     ;
     const messagesRef = React.useRef(null);
     const initialMessages = React.useMemo(() => {
         const prefix = Math.random().toString().slice(2);
         return initMsgs.map((m, i) => (Object.assign(Object.assign({}, m), { id: `initial-${prefix}-${i}` })));
     }, [initMsgs]);
-    const { messages: unparsed, input, handleInputChange, handleSubmit, append, isLoading, } = useAiChat(requestOpts, {
+    const { messages: unparsed, input, handleInputChange, handleSubmit, append, isLoading, stop, } = useAiChat(requestOpts, {
         initialMessages: initialMessages,
         id: chatId,
     });
+    React.useImperativeHandle(ref, () => ({ append }), [append]);
     const messages = React.useMemo(() => {
         const initial = initialMessages.map((m) => m.id);
         return unparsed.map((m) => {
@@ -193,6 +170,7 @@ const AiChatInternal = function AiChat(_a) {
     }, [parseContent, unparsed, initialMessages]);
     const showStarters = messages.length === initialMessages.length;
     const waiting = !showStarters && ((_b = messages[messages.length - 1]) === null || _b === void 0 ? void 0 : _b.role) === "user";
+    const stoppable = isLoading && ((_c = messages[messages.length - 1]) === null || _c === void 0 ? void 0 : _c.role) !== "user";
     const scrollToBottom = () => {
         var _a;
         (_a = messagesRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({
@@ -202,14 +180,12 @@ const AiChatInternal = function AiChat(_a) {
     };
     const lastMsg = messages[messages.length - 1];
     return (React.createElement(ChatContainer, Object.assign({ className: classNames(className, classes.root) }, others),
-        React.createElement(ChatTitle, { title: title, onClose: onClose }),
+        React.createElement(ChatTitle, { title: title, askTimTitle: askTimTitle, onClose: onClose, className: classNames(className, classes.title) }),
         React.createElement(MessagesContainer, { className: classes.messagesContainer, ref: messagesRef },
             messages.map((m) => (React.createElement(MessageRow, { key: m.id, "data-chat-role": m.role, className: classNames(classes.messageRow, {
                     [classes.messageRowUser]: m.role === "user",
                     [classes.messageRowAssistant]: m.role === "assistant",
                 }) },
-                m.role === "assistant" ? (React.createElement(Avatar, { className: classes.avatar },
-                    React.createElement(ImageAdapter, { src: mascot, alt: "", Component: ImgComponent }))) : null,
                 React.createElement(Message, { className: classes.message },
                     React.createElement(VisuallyHidden, null, m.role === "user" ? "You said: " : "Assistant said: "),
                     React.createElement(Markdown, { skipHtml: true }, m.content))))),
@@ -218,16 +194,24 @@ const AiChatInternal = function AiChat(_a) {
                     append({ role: "user", content: m.content });
                 } }, m.content))))) : null,
             waiting ? (React.createElement(MessageRow, { className: classNames(classes.messageRow, classes.messageRowAssistant), key: "loading" },
-                React.createElement(Avatar, { className: classes.avatar },
-                    React.createElement(ImageAdapter, { src: mascot, alt: "", Component: ImgComponent })),
                 React.createElement(Message, null,
-                    React.createElement(Dots, null)))) : null),
+                    React.createElement(RiMoreFill, null)))) : null),
         React.createElement("form", { onSubmit: (e) => {
-                scrollToBottom();
-                handleSubmit(e);
+                e.preventDefault();
+                if (isLoading && stoppable) {
+                    stop();
+                }
+                else {
+                    scrollToBottom();
+                    handleSubmit(e);
+                }
             } },
-            React.createElement(InputStyled, { fullWidth: true, size: "hero", className: classes.input, placeholder: placeholder, name: "message", sx: { flex: 1 }, value: input, onChange: handleInputChange, endAdornment: React.createElement(ActionButtonStyled, { size: "large", "aria-label": "Send", type: "submit", disabled: isLoading || !input },
-                    React.createElement(RiSendPlaneFill, null)) })),
+            React.createElement(StyledInput, { fullWidth: true, size: "chat", className: classes.input, placeholder: placeholder, name: "message", sx: { flex: 1 }, value: input, onChange: handleInputChange, endAdornment: isLoading ? (React.createElement(AdornmentButton, { "aria-label": "Stop", onClick: stop, disabled: !stoppable },
+                    React.createElement(StyledStopButton, null))) : (React.createElement(AdornmentButton, { "aria-label": "Send", type: "submit", disabled: !input, onClick: (e) => {
+                        scrollToBottom();
+                        handleSubmit(e);
+                    } },
+                    React.createElement(StyledSendButton, null))) })),
         React.createElement(SrAnnouncer, { isLoading: isLoading, loadingMessages: srLoadingMessages, message: lastMsg.role === "assistant" ? lastMsg.content : "" })));
 };
 const AiChat = (props) => (
@@ -236,7 +220,7 @@ const AiChat = (props) => (
  * hook calls. This can cause strange effects like loading API responses
  * for previous chatId into new chatId.
  *
- * To avoid this, let's chnge the key, this will force React to make a new component
+ * To avoid this, let's change the key, this will force React to make a new component
  * not sharing any of the old state.
  */
 React.createElement(AiChatInternal, Object.assign({ key: props.chatId }, props)));

package/dist/esm/components/AiChat/AiChat.stories.js

@@ -10,6 +10,14 @@ const INITIAL_MESSAGES = [
         content: "Hi! What are you interested in learning about?",
         role: "assistant",
     },
+    {
+        content: "I need to brush up on my Calculus",
+        role: "user",
+    },
+    {
+        content: "Great! Do you want to start with the basics, like limits and derivatives, or jump into more advanced topics like integrals and series? Let me know how I can help!",
+        role: "assistant",
+    },
 ];
 const STARTERS = [
     { content: "I'm interested in quantum computing" },
@@ -18,7 +26,7 @@ const STARTERS = [
 ];
 const Container = styled.div({
     width: "100%",
-    height: "500px",
+    height: "800px",
 });
 const meta = {
     title: "smoot-design/ai/AiChat",
@@ -32,7 +40,7 @@ const meta = {
         initialMessages: INITIAL_MESSAGES,
         requestOpts: { apiUrl: TEST_API_STREAMING },
         conversationStarters: STARTERS,
-        title: "Chat with AI",
+        askTimTitle: "to recommend a course",
         onClose: fn(),
     },
     argTypes: {
@@ -68,6 +76,7 @@ export const StreamingResponses = {};
  */
 export const JsonResponses = {
     args: {
+        title: "Chat with AI",
         requestOpts: { apiUrl: TEST_API_JSON },
         parseContent: (content) => {
             return JSON.parse(content).message;

package/dist/esm/components/AiChat/AiChat.test.js

@@ -58,7 +58,7 @@ describe("AiChat", () => {
             { content: faker.lorem.sentence() },
             { content: faker.lorem.sentence() },
         ];
-        const view = render(React.createElement(AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: "http://localhost:4567/test" } }, props)), { wrapper: ThemeProvider });
+        const view = render(React.createElement(AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: "http://localhost:4567/test" }, placeholder: "Type a message..." }, props)), { wrapper: ThemeProvider });
         const rerender = (newProps) => {
             view.rerender(React.createElement(AiChat, Object.assign({ "data-testid": "ai-chat", initialMessages: initialMessages, conversationStarters: conversationStarters, requestOpts: { apiUrl: "http://localhost:4567/test" } }, newProps)));
         };

package/dist/esm/components/AiChat/types.d.ts

@@ -1,5 +1,5 @@
 type Role = "assistant" | "user";
-type ChatMessage = {
+type AiChatMessage = {
     id: string;
     content: string;
     role: Role;
@@ -12,12 +12,12 @@ type RequestOpts = {
      *
      * JSON.stringify is applied to the return value.
      */
-    transformBody?: (messages: ChatMessage[]) => unknown;
+    transformBody?: (messages: AiChatMessage[]) => unknown;
     /**
      * Extra options to pass to fetch.
      */
     fetchOpts?: RequestInit;
-    onFinish?: (message: ChatMessage) => void;
+    onFinish?: (message: AiChatMessage) => void;
 };
 type AiChatProps = {
     /**
@@ -30,15 +30,19 @@ type AiChatProps = {
      */
     title?: string;
     /**
-     * Plaeholder message for chat input
+     * If provided, renders the "AskTIM" title motif followed by the text.
+     */
+    askTimTitle?: string;
+    /**
+     * Placeholder message for chat input
      */
     placeholder?: string;
     /**
-     * Fired when "Close" button within title bar is clicked.
+     * Sends an initial user prompt on first load
      */
     onClose?: () => void;
     className?: string;
-    initialMessages: Omit<ChatMessage, "id">[];
+    initialMessages: Omit<AiChatMessage, "id">[];
     conversationStarters?: {
         content: string;
     }[];
@@ -61,5 +65,11 @@ type AiChatProps = {
      * By default, the theme's ImageAdater is used.
      */
     ImgComponent?: React.ElementType;
+    /**
+     * Provide a ref to the chat component to access the `append` method.
+     */
+    ref?: React.Ref<{
+        append: (message: Omit<AiChatMessage, "id">) => void;
+    }>;
 };
-export type { RequestOpts, AiChatProps, ChatMessage };
+export type { RequestOpts, AiChatProps, AiChatMessage };

package/dist/esm/components/ImageAdapter/ImageAdapter.d.ts

@@ -13,7 +13,7 @@ type ImageAdapterProps = React.ComponentProps<"img"> & {
     Component?: React.ElementType;
 } & ImageAdapterPropsOverrides;
 /**
- * Overrideable Image component.
+ * Overridable Image component.
  * - If `Component` is provided, renders as `Component`
  * - else, if `theme.custom.ImageAdapter` is provided, renders as `theme.custom.ImageAdapter`
  * - else, renders as `img` tag

package/dist/esm/components/ImageAdapter/ImageAdapter.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from "react";
 import { useTheme } from "@emotion/react";
 /**
- * Overrideable Image component.
+ * Overridable Image component.
  * - If `Component` is provided, renders as `Component`
  * - else, if `theme.custom.ImageAdapter` is provided, renders as `theme.custom.ImageAdapter`
  * - else, renders as `img` tag

package/dist/esm/components/Input/Input.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { InputBaseProps } from "@mui/material/InputBase";
 import type { Theme } from "@mui/material/styles";
-type Size = "small" | "medium" | "large" | "hero";
+type Size = "small" | "medium" | "large" | "chat" | "hero";
 type CustomInputProps = {
     /**
      * If true, the input will display one size smaller at mobile breakpoint.
@@ -34,6 +34,7 @@ declare const baseInputStyles: (theme: Theme) => {
     borderWidth: string;
     borderStyle: string;
     borderRadius: string;
+    overflow: string;
     "&.Mui-disabled": {
         backgroundColor: string;
     };

package/dist/esm/components/Input/Input.js

@@ -22,11 +22,12 @@ const responsiveSize = {
     small: "small",
     medium: "small",
     large: "medium",
+    chat: "medium",
     hero: "large",
 };
 const sizeStyles = ({ size, theme, multiline }) => css([
     (size === "small" || size === "medium") && Object.assign({}, theme.typography.body2),
-    (size === "large" || size === "hero") && Object.assign({ ".remixicon": {
+    (size === "large" || size === "chat" || size === "hero") && Object.assign({ ".remixicon": {
             width: "24px",
             height: "24px",
         } }, theme.typography.body1),
@@ -46,6 +47,10 @@ const sizeStyles = ({ size, theme, multiline }) => css([
         !multiline && {
         height: "48px",
     },
+    size === "chat" &&
+        !multiline && {
+        height: "56px",
+    },
     size === "hero" &&
         !multiline && {
         height: "72px",
@@ -76,6 +81,20 @@ const sizeStyles = ({ size, theme, multiline }) => css([
             width: "48px",
         },
     },
+    size === "chat" && {
+        padding: "0 16px",
+        borderRadius: "8px",
+        "&:hover:not(.Mui-disabled):not(.Mui-focused)": {
+            borderColor: theme.custom.colors.silverGrayLight,
+        },
+        "&.Mui-focused": {
+            borderColor: theme.custom.colors.silverGrayLight,
+            outline: "none",
+        },
+        ".Mit-AdornmentButton": {
+            padding: "0 16px",
+        },
+    },
     size === "hero" && {
         padding: "0 24px",
         ".Mit-AdornmentButton": {
@@ -93,6 +112,7 @@ const baseInputStyles = (theme) => ({
     borderWidth: "1px",
     borderStyle: "solid",
     borderRadius: "4px",
+    overflow: "hidden",
     "&.Mui-disabled": {
         backgroundColor: theme.custom.colors.lightGray1,
     },
@@ -166,16 +186,19 @@ const Input = styled(InputBase, {
         }),
     },
 ]);
-const AdornmentButtonStyled = styled.button(({ theme }) => (Object.assign(Object.assign({}, theme.typography.button), { 
+const AdornmentButtonStyled = styled.button(({ theme, disabled }) => (Object.assign(Object.assign({}, theme.typography.button), { 
     // display
     display: "flex", flexShrink: 0, justifyContent: "center", alignItems: "center", 
     // background and border
     border: "none", background: "transparent", transition: `background ${theme.transitions.duration.short}ms`, 
     // cursor
-    cursor: "pointer", ":disabled": {
+    cursor: disabled ? "default" : "pointer", ":disabled": {
         cursor: "default",
+        svg: {
+            fill: theme.custom.colors.silverGray,
+        },
     }, ":hover": {
-        background: "rgba(0, 0, 0, 0.06)",
+        background: disabled ? "inherit" : "rgba(0, 0, 0, 0.06)",
     }, color: theme.custom.colors.silverGray, ".MuiInputBase-root:hover &": {
         color: "inherit",
     }, ".MuiInputBase-root.Mui-focused &": {

package/dist/esm/components/Input/Input.stories.js

@@ -10,6 +10,7 @@ const SIZES = enumValues({
     small: true,
     medium: true,
     large: true,
+    chat: true,
     hero: true,
 });
 const ADORNMENTS = {

package/dist/esm/components/ScrollSnap/ScrollSnap.js

@@ -21,7 +21,7 @@ const Scroller = styled.div({
  * content is added, unless the user has scrolled up.
  */
 const ScrollSnap = React.forwardRef(function ScrollSnap({ children, threshold = 2, className }, ref) {
-    const el = React.useRef();
+    const el = React.useRef(null);
     // `content` a delayed version of children to allow measuring scroll position
     // using the old children.
     const [content, setContent] = React.useState(children);

package/dist/esm/components/TextField/TextField.stories.js

@@ -10,6 +10,7 @@ const SIZES = enumValues({
     small: true,
     medium: true,
     large: true,
+    chat: true,
     hero: true,
 });
 const ADORNMENTS = {

package/dist/esm/utils/composeRefs.test.js

@@ -3,8 +3,8 @@ import { composeRefs } from "./composeRefs";
 import { render, screen } from "@testing-library/react";
 describe("composeRefs", () => {
     test("Composing object + fn ref", () => {
-        const objRef1 = { current: null };
-        const objRef2 = { current: null };
+        const objRef1 = React.createRef();
+        const objRef2 = React.createRef();
         const fnRef1 = jest.fn();
         const fnRef2 = jest.fn();
         render(React.createElement("div", { "data-testid": "my-div", ref: composeRefs(objRef1, objRef2, fnRef1, fnRef2) }));

package/dist/esm/utils/useInterval.js

@@ -5,7 +5,7 @@ import { useRef, useEffect } from "react";
  * Based on https://overreacted.io/making-setinterval-declarative-with-react-hooks/
  */
 const useInterval = (callback, delay) => {
-    const savedCallback = useRef();
+    const savedCallback = useRef(null);
     useEffect(() => {
         savedCallback.current = callback;
     }, [callback]);