@vectara/vectara-ui 0.0.2

package/lib/components/chat/ChatTurn.d.ts

@@ -0,0 +1,9 @@
+import { ChatTurn } from "./types";
+type Props = {
+    turn: ChatTurn;
+    isInspectionEnabled?: boolean;
+    setInspectedTurn: (turn: ChatTurn) => void;
+    onRetry: (turn: ChatTurn) => void;
+};
+export declare const VuiChatTurn: ({ turn, isInspectionEnabled, setInspectedTurn, onRetry }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/chat/ChatTurn.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { BiError, BiListUl } from "react-icons/bi";
+import classNames from "classnames";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiSpinner } from "../spinner/Spinner";
+import { VuiText } from "../typography/Text";
+import { VuiTextColor } from "../typography/TextColor";
+import { VuiIcon } from "../icon/Icon";
+import { VuiIconButton } from "../button/IconButton";
+import { VuiButtonSecondary } from "../button/ButtonSecondary";
+import { VuiSpacer } from "../spacer/Spacer";
+export const VuiChatTurn = ({ turn, isInspectionEnabled, setInspectedTurn, onRetry }) => {
+    var _a;
+    const turnClasses = classNames("vuiChatQuestion", {
+        "vuiChatQuestion--error": !turn.isLoading && turn.error
+    });
+    return (_jsxs("div", Object.assign({ className: "vuiChatTurn" }, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", justifyContent: "spaceBetween", spacing: "xs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsx("div", Object.assign({ className: turnClasses }, { children: _jsx("h3", { children: turn.question }) })) })), isInspectionEnabled && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIconButton, { size: "xs", className: "vuiChat__inspectButton", color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "s" }, { children: _jsx(BiListUl, {}) })), onClick: () => setInspectedTurn(turn) }) })))] })), _jsx("div", Object.assign({ className: "vuiChatAnswer" }, { children: turn.isLoading ? (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiSpinner, { size: "xs" }) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "subdued" }, { children: "Thinking\u2026" })) }) }) }))] }))) : turn.error ? (_jsxs(_Fragment, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiIcon, Object.assign({ color: "subdued" }, { children: _jsx(BiError, {}) })) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "subdued" }, { children: (_a = turn.error) === null || _a === void 0 ? void 0 : _a.message })) }) }) }))] })), _jsx(VuiSpacer, { size: "s" }), _jsx(VuiButtonSecondary, Object.assign({ size: "xs", color: "neutral", onClick: () => onRetry(turn) }, { children: "Ask again" }))] })) : (turn.answer) }))] })));
+};

package/lib/components/chat/_index.scss

@@ -0,0 +1,150 @@
+@import "chatTurn";
+
+$minChatHeight: 600px;
+$minChatWidth: 600px;
+
+.vuiChatButton,
+.vuiChat {
+  position: fixed;
+  right: $sizeXxs;
+  bottom: $sizeXxs;
+  z-index: $chatZIndex;
+}
+
+.vuiChatButton-isHidden,
+.vuiChat--closed {
+  // If we used display: none, then the button's animation would play every
+  // time the button is shown.
+  visibility: hidden;
+  // For some reason the buttons inside the header are visible for an extra frame
+  // after closing the chat. This fixes that flicker.
+  opacity: 0;
+}
+
+.vuiChatButton {
+  padding: $sizeXs $sizeS;
+  font-size: $fontSizeStandard;
+  color: $colorText;
+  background-color: $colorPrimaryLightShade;
+  border: 1px solid $borderColor;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+  transition: all $transitionSpeed;
+  animation: popUp 0.4s cubic-bezier(0.5, 0, 0.5, 1) 1;
+
+  &:hover {
+    box-shadow: $shadowLargeEnd;
+    translate: translateY(-20px);
+  }
+}
+
+@keyframes popUp {
+  0% {
+    transform: translateY(40px);
+  }
+
+  50% {
+    transform: translateY(-10px);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.vuiChat {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 420px;
+  border-radius: $sizeXs;
+  overflow: hidden;
+  border: 1px solid $borderColor;
+  background-color: $colorLightShade;
+
+  @media screen and (max-height: $minChatHeight) {
+    & {
+      bottom: $sizeXxs;
+      height: calc(100vh - 2 * #{$sizeXxs});
+    }
+
+    .vuiChat__conversation {
+      max-height: 100%;
+    }
+  }
+
+  @media screen and (max-width: $minChatWidth) {
+    & {
+      right: $sizeXxs;
+      width: calc(100vw - 2 * #{$sizeXxs});
+      max-width: 100% !important;
+    }
+  }
+}
+
+.vuiChat--tall {
+  bottom: $sizeXxs;
+  height: calc(100vh - 2 * #{$sizeXxs});
+
+  .vuiChat__conversation {
+    max-height: 100%;
+  }
+}
+
+.vuiChat--fullScreen {
+  height: calc(100vh - 2 * #{$sizeXxs});
+  width: calc(100vw - 2 * #{$sizeXxs});
+  max-width: 100% !important;
+
+  .vuiChat__conversation {
+    max-height: 100%;
+  }
+}
+
+.vuiChat__header {
+  padding: $sizeXs $sizeS;
+  font-size: $fontSizeStandard;
+  color: $colorText;
+  background-color: $colorPrimaryLightShade;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+  // Ensure shadow overlaps on top of conversation.
+  z-index: 2;
+}
+
+.vuiChat__conversation {
+  flex-grow: 1;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.vuiChat__introduction {
+  padding: $sizeM $sizeL 0;
+  font-size: $fontSizeStandard;
+  color: $colorFullShade;
+}
+
+.vuiChat__turns {
+  font-size: $fontSizeStandard;
+}
+
+.vuiChat__conversationActions {
+  padding: $sizeS;
+}
+
+.vuiChat__input {
+  border-top: 1px solid $borderColorLight;
+  padding: $sizeXs $sizeS;
+}
+
+.vuiChatPanel {
+  position: absolute;
+  z-index: 5;
+  top: $sizeXxs;
+  left: $sizeXxs;
+  right: $sizeXxs;
+  bottom: $sizeXxs;
+  padding: $sizeXxs $sizeS;
+  overflow-y: auto;
+  background-color: $colorEmptyShade;
+  border: 1px solid $borderColor;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+}

package/lib/components/chat/chatTurn.scss

@@ -0,0 +1,38 @@
+.vuiChatTurn {
+  position: relative;
+  left: 0;
+  box-shadow: $shadowLargeStart;
+  background-color: $colorEmptyShade;
+  padding: $sizeL $sizeS $sizeL $sizeL;
+  margin-right: $sizeXxs;
+  transition: all $transitionSpeed;
+
+  &:hover {
+    box-shadow: $shadowLargeEnd;
+    z-index: 1;
+    left: $sizeXxs;
+  }
+}
+
+.vuiChatTurn + .vuiChatTurn {
+  margin-top: 1px;
+}
+
+.vuiChatQuestion {
+  color: $colorAccent;
+  font-weight: $fontWeightBold;
+  font-size: $fontSizeStandard;
+  margin-bottom: $sizeXs;
+}
+
+.vuiChatQuestion--error {
+  color: $colorDanger;
+}
+
+.vuiChat__inspectButton {
+  margin-top: -$sizeXxs;
+}
+
+.vuiChatAnswer {
+  color: $colorFullShade;
+}

package/lib/components/chat/types.d.ts

@@ -0,0 +1,17 @@
+import { SearchResult } from "../searchResult/SearchResult";
+export type ChatTurn = {
+    question: string;
+    isLoading?: boolean;
+    error?: {
+        code?: string;
+        message: string;
+    };
+    answer?: string;
+    query?: string;
+    language?: ChatLanguage;
+    results?: SearchResult[];
+};
+export declare const CHAT_LANGUAGES: readonly ["auto", "eng", "deu", "fra", "zho", "kor", "ara", "rus", "tha", "nld", "ita", "por", "spa", "jpn", "pol", "tur"];
+export type ChatLanguage = (typeof CHAT_LANGUAGES)[number];
+export declare const CHAT_STYLE_ORDER: readonly ["closed", "condensed", "tall", "fullScreen"];
+export type ChatStyle = (typeof CHAT_STYLE_ORDER)[number];

package/lib/components/chat/types.js

@@ -0,0 +1,19 @@
+export const CHAT_LANGUAGES = [
+    "auto",
+    "eng",
+    "deu",
+    "fra",
+    "zho",
+    "kor",
+    "ara",
+    "rus",
+    "tha",
+    "nld",
+    "ita",
+    "por",
+    "spa",
+    "jpn",
+    "pol",
+    "tur",
+];
+export const CHAT_STYLE_ORDER = ["closed", "condensed", "tall", "fullScreen"];

package/lib/components/code/Code.d.ts

@@ -0,0 +1,17 @@
+import "prismjs/themes/prism.css";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-jsx";
+import "prismjs/components/prism-tsx";
+import { CodeLanguage } from "./types";
+type Props = {
+    language?: CodeLanguage;
+    onCopy?: () => void;
+    children?: string;
+    fullHeight?: boolean;
+    "data-testid"?: string;
+};
+export declare const VuiCode: ({ onCopy, language, fullHeight, children, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/code/Code.js

@@ -0,0 +1,44 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import Prism from "prismjs";
+import "prismjs/themes/prism.css";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-jsx";
+import "prismjs/components/prism-tsx";
+import classNames from "classnames";
+import { BiClipboard } from "react-icons/bi";
+import { VuiIconButton } from "../button/IconButton";
+import { VuiIcon } from "../icon/Icon";
+// PrismJS clears highlighting when language-none is set.
+export const VuiCode = (_a) => {
+    var { onCopy, language = "none", fullHeight, children = "" } = _a, rest = __rest(_a, ["onCopy", "language", "fullHeight", "children"]);
+    useEffect(() => {
+        Prism.highlightAll();
+    }, [children, language]);
+    const containerClasses = classNames("vuiCodeContainer", {
+        "vuiCodeContainer--fullHeight": fullHeight
+    });
+    const classes = classNames("vuiCode", `language-${language}`, {
+        "vuiCode--fullHeight": fullHeight
+    });
+    const testId = rest["data-testid"];
+    return (_jsxs("div", Object.assign({ className: containerClasses }, rest, { children: [_jsx("pre", Object.assign({ className: "vuiCodePre" }, { children: _jsx("code", Object.assign({ className: classes }, { children: children })) })), _jsx(VuiIconButton, { color: "neutral", icon: _jsx(VuiIcon, { children: _jsx(BiClipboard, { size: 20 }) }), "aria-label": "Copy to clipboard", className: "vuiCodeCopyButton", onClick: () => {
+                    navigator.clipboard.writeText(children);
+                    if (onCopy)
+                        onCopy();
+                } }), testId && (_jsx("div", Object.assign({ "data-testid": `${testId}-hidden`, hidden: true }, { children: children })))] })));
+};

package/lib/components/code/_index.scss

@@ -0,0 +1,33 @@
+.vuiCodeContainer {
+  position: relative;
+  border-left: $sizeXxs solid $colorMediumShade;
+  max-height: 480px;
+}
+
+.vuiCodeContainer--fullHeight {
+  max-height: 100%;
+}
+
+.vuiCodeCopyButton {
+  position: absolute;
+  right: $sizeXxs;
+  top: $sizeXxs;
+}
+
+.vuiCodePre {
+  padding: 0 !important;
+  margin: 0 !important;
+  max-height: inherit;
+}
+
+.vuiCode {
+  display: block;
+  width: 100%;
+  padding: $sizeM $sizeL;
+  background-color: $colorLightShade;
+  color: $colorText;
+  font-family: "Roboto Mono", monospace;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  font-size: $fontSizeSmall !important;
+}

package/lib/components/code/types.d.ts

@@ -0,0 +1 @@
+export type CodeLanguage = "json" | "js" | "ts" | "jsx" | "tsx" | "bash" | "none";

package/lib/components/code/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/context/Context.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+import { LinkProps } from "../link/types";
+type LinkProvider = (linkConfig: LinkProps) => JSX.Element;
+type PathProvider = () => string;
+interface VuiContextType {
+    createLink: LinkProvider;
+    getPath: PathProvider;
+    DrawerTitle: keyof JSX.IntrinsicElements;
+}
+type Props = {
+    children: ReactNode;
+    linkProvider?: LinkProvider;
+    pathProvider?: PathProvider;
+    drawerTitle?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+};
+export declare const VuiContextProvider: ({ children, linkProvider, pathProvider, drawerTitle }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const useVuiContext: () => VuiContextType;
+export {};

package/lib/components/context/Context.js

@@ -0,0 +1,34 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const VuiContext = createContext(undefined);
+export const VuiContextProvider = ({ children, linkProvider, pathProvider, drawerTitle = "h2" }) => {
+    const createLink = (linkConfig) => {
+        if (linkProvider)
+            return linkProvider(linkConfig);
+        const { className, href, onClick, children } = linkConfig, rest = __rest(linkConfig, ["className", "href", "onClick", "children"]);
+        return (_jsx("a", Object.assign({ className: className, href: href, onClick: onClick }, rest, { children: children })));
+    };
+    const getPath = () => {
+        return pathProvider ? pathProvider() : window.location.pathname;
+    };
+    const DrawerTitle = drawerTitle;
+    return _jsx(VuiContext.Provider, Object.assign({ value: { createLink, getPath, DrawerTitle } }, { children: children }));
+};
+export const useVuiContext = () => {
+    const context = useContext(VuiContext);
+    if (context === undefined) {
+        throw new Error("useVuiContext must be used within a VuiContextProvider");
+    }
+    return context;
+};

package/lib/components/context/Context.test.util.d.ts

@@ -0,0 +1,2 @@
+import { render } from "@testing-library/react";
+export declare const renderWithContext: (children: React.ReactNode, ...rest: any) => ReturnType<typeof render>;

package/lib/components/context/Context.test.util.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from "@testing-library/react";
+import { Link } from "react-router-dom";
+import { VuiContextProvider } from "./Context";
+const linkProvider = (linkConfig) => {
+    const { className, href, onClick, children } = linkConfig, rest = __rest(linkConfig, ["className", "href", "onClick", "children"]);
+    return (_jsx(Link, Object.assign({ className: className, to: href !== null && href !== void 0 ? href : "", onClick: onClick }, rest, { children: children })));
+};
+export const renderWithContext = (children, ...rest) => {
+    return render(_jsx(VuiContextProvider, Object.assign({ linkProvider: linkProvider }, { children: children })), ...rest);
+};

package/lib/components/copyButton/CopyButton.d.ts

@@ -0,0 +1,10 @@
+import { Props as OptionsButtonProps } from "../optionsButton/OptionsButton";
+type Props = {
+    value: string;
+    options?: OptionsButtonProps["options"];
+    size: OptionsButtonProps["size"];
+    label?: string;
+    title?: string;
+};
+export declare const VuiCopyButton: ({ value, options, label, size, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/copyButton/CopyButton.js

@@ -0,0 +1,50 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { VuiOptionsButton } from "../optionsButton/OptionsButton";
+import { VuiIcon } from "../icon/Icon";
+import { BiCheck, BiClipboard } from "react-icons/bi";
+import { VuiButtonSecondary } from "../button/ButtonSecondary";
+const sizeToIconSizeMap = {
+    xs: "s",
+    s: "s",
+    m: "m",
+    l: "m",
+    xl: "m"
+};
+export const VuiCopyButton = (_a) => {
+    var { value, options, label, size = "s" } = _a, rest = __rest(_a, ["value", "options", "label", "size"]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [isCopied, setIsCopied] = useState(false);
+    useEffect(() => {
+        if (isCopied) {
+            const timeout = setTimeout(() => {
+                setIsCopied(false);
+            }, 2400);
+            return () => clearTimeout(timeout);
+        }
+    }, [isCopied]);
+    const icon = isCopied ? (_jsx(VuiIcon, Object.assign({ size: sizeToIconSizeMap[size], color: "success" }, { children: _jsx(BiCheck, {}) }))) : (_jsx(VuiIcon, Object.assign({ size: sizeToIconSizeMap[size] }, { children: _jsx(BiClipboard, {}) })));
+    const copy = (copyValue = value) => {
+        navigator.clipboard.writeText(copyValue);
+        setIsCopied(true);
+    };
+    return options ? (_jsx(VuiOptionsButton, Object.assign({ type: "secondary", icon: icon, isOpen: isOpen, setIsOpen: setIsOpen, color: "neutral", size: size, onClick: () => {
+            copy();
+        }, onSelectOption: (value) => {
+            copy(value);
+            setIsOpen(false);
+        }, options: options }, rest, { children: label }))) : (_jsx(VuiButtonSecondary, Object.assign({ size: size, icon: icon, color: "neutral", onClick: () => {
+            copy(value);
+        } }, rest, { children: label })));
+};

package/lib/components/drawer/Drawer.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+declare const COLOR: readonly ["primary", "danger"];
+type Props = {
+    className?: string;
+    title: ReactNode;
+    icon?: ReactNode;
+    children: ReactNode;
+    isOpen?: boolean;
+    onClose?: () => void;
+    color?: (typeof COLOR)[number];
+};
+export declare const VuiDrawer: ({ className, color, title, icon, children, isOpen, onClose, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/drawer/Drawer.js

@@ -0,0 +1,53 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import classNames from "classnames";
+import { FocusOn } from "react-focus-on";
+import { BiX } from "react-icons/bi";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiIconButton } from "../button/IconButton";
+import { VuiIcon } from "../icon/Icon";
+import { VuiPortal } from "../portal/Portal";
+import { VuiScreenBlock } from "../screenBlock/ScreenBlock";
+import { useVuiContext } from "../context/Context";
+const COLOR = ["primary", "danger"];
+export const VuiDrawer = (_a) => {
+    var { className, color = "primary", title, icon, children, isOpen, onClose } = _a, rest = __rest(_a, ["className", "color", "title", "icon", "children", "isOpen", "onClose"]);
+    const { DrawerTitle } = useVuiContext();
+    const returnFocusElRef = useRef(null);
+    // Return focus on unmount.
+    useEffect(() => {
+        var _a;
+        if (isOpen) {
+            returnFocusElRef.current = document.activeElement;
+        }
+        else {
+            (_a = returnFocusElRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            returnFocusElRef.current = null;
+        }
+    }, [isOpen]);
+    // Allow contents to respond to blur events before unmounting.
+    const onCloseDelayed = () => {
+        window.setTimeout(() => {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }, 0);
+    };
+    const classes = classNames("vuiDrawer", `vuiDrawer--${color}`, className);
+    return (_jsx(VuiPortal, { children: isOpen && (_jsx(VuiScreenBlock, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: onCloseDelayed, 
+                // Enable manual focus return to work.
+                returnFocus: false, 
+                // Enable focus on contents when it's open,
+                // but enable manual focus return to work when it's closed.
+                autoFocus: isOpen }, { children: _jsxs("div", Object.assign({ className: classes }, rest, { children: [_jsx("div", Object.assign({ className: "vuiDrawerHeader" }, { children: _jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [icon && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "l" }, { children: icon })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiDrawerHeader__title" }, { children: _jsx(DrawerTitle, { children: title }) })) }))] })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "data-testid": "drawerCloseButton", onClick: onCloseDelayed, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: _jsx(BiX, {}) })) }) }))] })) })), _jsx("div", Object.assign({ className: "vuiDrawerContent" }, { children: _jsx("div", Object.assign({ className: "vuiDrawerContent__inner" }, { children: children })) }))] })) })) })) }));
+};

package/lib/components/drawer/_index.scss

@@ -0,0 +1,73 @@
+@use "sass:map";
+
+$drawerWidth: 680px;
+
+@keyframes drawerIn {
+  0% {
+    right: -$drawerWidth;
+  }
+
+  100% {
+    right: 0;
+  }
+}
+
+.vuiDrawer {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  max-width: $drawerWidth;
+  background-color: $colorEmptyShade;
+  border-left: 1px solid $borderColor;
+  z-index: $drawerZIndex;
+  animation: drawerIn $transitionSpeed cubic-bezier(0, 1, 0, 1);
+}
+
+.vuiDrawerHeader {
+  padding: $sizeL $sizeL;
+}
+
+.vuiDrawerHeader__title {
+  font-size: $fontSizeXLarge;
+  font-weight: $fontWeightBold;
+  line-height: 1.2;
+  color: $colorText;
+}
+
+.vuiDrawerContent {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.vuiDrawerContent__inner {
+  padding: $sizeL $sizeL;
+}
+
+// Color
+$color: (
+  primary: (
+    "background-color": $colorPrimaryLightShade,
+    "color": $colorText
+  ),
+  danger: (
+    "background-color": $colorDangerLightShade,
+    "color": $colorDanger
+  )
+);
+
+@each $colorName, $colorValue in $color {
+  .vuiDrawer--#{$colorName} {
+    .vuiDrawerHeader {
+      background-color: #{map.get($colorValue, "background-color")};
+
+      .vuiDrawerHeader__title,
+      .vuiIcon {
+        color: #{map.get($colorValue, "color")};
+      }
+    }
+  }
+}