@vectara/vectara-ui 13.3.1 → 13.5.0

package/lib/components/button/IconButton.d.ts

@@ -21,6 +21,7 @@ type Props = {
     tooltip?: {
         darkTheme?: TooltipProps["darkTheme"];
         position?: TooltipProps["position"];
+        usePortal?: TooltipProps["usePortal"];
     };
 };
 export declare const VuiIconButton: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement | null>>;

package/lib/components/card/Card.d.ts

@@ -10,6 +10,8 @@ type Props = {
     ungrouped?: boolean;
     fullHeight?: boolean;
     isScrollable?: boolean;
+    isExpanded?: boolean;
+    onToggleExpansion?: () => void;
 };
-export declare const VuiCard: ({ type, header, body, align, interactive, href, className, padding, ungrouped, fullHeight, isScrollable, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiCard: ({ type, header, body, align, interactive, href, className, padding, ungrouped, fullHeight, isScrollable, isExpanded, onToggleExpansion, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/card/Card.js

@@ -11,18 +11,32 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+import { BiChevronDown, BiChevronRight } from "react-icons/bi";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiIcon } from "../icon/Icon";
+import { createId } from "../../utils/createId";
 export const VuiCard = (_a) => {
-    var { type = "outlined", header, body, align = "left", interactive, href, className, padding = "s", ungrouped, fullHeight, isScrollable } = _a, rest = __rest(_a, ["type", "header", "body", "align", "interactive", "href", "className", "padding", "ungrouped", "fullHeight", "isScrollable"]);
-    const classes = classNames("vuiCard", `vuiCard--${type}`, `vuiCard--${align}`, `vuiCard--${padding}`, {
-        "vuiCard--interactive": interactive && !href,
+    var { type = "outlined", header, body, align = "left", interactive, href, className, padding = "s", ungrouped, fullHeight, isScrollable, isExpanded, onToggleExpansion } = _a, rest = __rest(_a, ["type", "header", "body", "align", "interactive", "href", "className", "padding", "ungrouped", "fullHeight", "isScrollable", "isExpanded", "onToggleExpansion"]);
+    const isExpandable = Boolean(onToggleExpansion);
+    const buttonId = createId();
+    const bodyId = createId();
+    const classes = classNames("vuiCard", 
+    // for now, we only support outlined cards for expandable cards
+    `vuiCard--${isExpandable ? "outlined" : type}`, `vuiCard--${align}`, `vuiCard--${padding}`, {
+        "vuiCard--interactive": interactive && !href && !isExpandable,
         "vuiCard--link": href,
         "vuiCard--ungrouped": ungrouped,
-        "vuiCard--fullHeight": fullHeight
+        "vuiCard--fullHeight": fullHeight,
+        "vuiCard--expandable": isExpandable
     }, className);
     const bodyClasses = classNames("vuiCard__body", {
         "vuiCard__body--withHeader": header,
         "vuiCard__body--scrollable": isScrollable
     });
+    if (isExpandable) {
+        return (_jsxs("div", Object.assign({ className: classes }, rest, { children: [header && (_jsx("button", Object.assign({ className: "vuiCard__expandableButton", onClick: onToggleExpansion, id: buttonId, "aria-controls": bodyId, "aria-expanded": isExpanded, type: "button" }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "start", spacing: "xs" }, { children: [_jsx(VuiIcon, Object.assign({ size: "m", color: "neutral", className: "vuiCard__expandableIcon" }, { children: isExpanded ? _jsx(BiChevronDown, {}) : _jsx(BiChevronRight, {}) })), _jsx(VuiFlexItem, Object.assign({ className: "vuiCard__expandableHeader", grow: 1 }, { children: header }))] })) }))), isExpanded && body && (_jsx("div", Object.assign({ className: bodyClasses, id: bodyId, "aria-labelledby": buttonId }, { children: body })))] })));
+    }
     const headerContent = header && _jsx("div", Object.assign({ className: "vuiCard__header" }, { children: header }));
     const bodyContent = body && _jsx("div", Object.assign({ className: bodyClasses }, { children: body }));
     if (href) {

package/lib/components/card/_index.scss

@@ -104,3 +104,50 @@
     padding: $sizeXl $sizeXxl;
   }
 }
+
+.vuiCard--expandable {
+  .vuiCard__expandableButton {
+    display: block;
+    width: 100%;
+    padding: $sizeM $sizeL;
+    text-align: left;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: background-color $transitionSpeed;
+  }
+
+  .vuiCard__expandableButton:hover {
+    background-color: var(--vui-color-light-shade);
+  }
+
+  .vuiCard__expandableButton:focus {
+    outline: 2px solid var(--vui-color-primary);
+    outline-offset: -2px;
+  }
+
+  .vuiCard__expandableIcon {
+    transition: transform $transitionSpeed ease-in-out;
+  }
+
+  .vuiCard__expandableHeader {
+    text-align: inherit;
+  }
+}
+
+// Size-specific expandable button padding
+.vuiCard--expandable.vuiCard--s .vuiCard__expandableButton {
+  padding: $sizeM $sizeL;
+}
+
+.vuiCard--expandable.vuiCard--m .vuiCard__expandableButton {
+  padding: $sizeL $sizeXl;
+}
+
+.vuiCard--expandable.vuiCard--l .vuiCard__expandableButton {
+  padding: $sizeXl $sizeXxl;
+}
+
+.vuiCard--expandable.vuiCard--outlined .vuiCard__body {
+  border-top: 1px solid var(--vui-color-border-light);
+}

package/lib/components/tooltip/Tooltip.d.ts

@@ -4,5 +4,6 @@ export type Props = {
     tip: React.ReactNode;
     darkTheme?: boolean;
     position?: TooltipRefProps["place"];
+    usePortal?: boolean;
 };
-export declare const VuiTooltip: ({ children, darkTheme, position, tip }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiTooltip: ({ children, darkTheme, position, tip, usePortal }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/tooltip/Tooltip.js

@@ -2,10 +2,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useState, cloneElement } from "react";
 import { Tooltip } from "react-tooltip";
 import { useVuiContext } from "../context/Context";
+import { VuiPortal } from "../portal/Portal";
 const generateTooltipId = () => {
     return `tooltip-${Math.random().toString(36).slice(2, 9)}`;
 };
-export const VuiTooltip = ({ children, darkTheme, position, tip }) => {
+export const VuiTooltip = ({ children, darkTheme, position, tip, usePortal }) => {
     const { getThemeStyle } = useVuiContext();
     const [id] = useState(generateTooltipId());
     const target = cloneElement(children, {
@@ -15,7 +16,8 @@ export const VuiTooltip = ({ children, darkTheme, position, tip }) => {
     // the light theme class in order to enable having a different theme than the
     // parent.
     const style = getThemeStyle(darkTheme ? "dark" : "light");
-    return (_jsxs(_Fragment, { children: [target, _jsx(Tooltip, Object.assign({ id: id, offset: 10, className: "vuiTooltip", style: style, opacity: 1, place: position }, { children: tip }))] }));
+    const tooltip = (_jsx(Tooltip, Object.assign({ id: id, offset: 10, className: "vuiTooltip", style: style, opacity: 1, place: position }, { children: tip })));
+    return (_jsxs(_Fragment, { children: [target, usePortal ? _jsx(VuiPortal, { children: tooltip }) : tooltip] }));
 };
 // This is a workaround for the issue with ResizeObserver in ReactTooltip.
 // Without this, uncaught runtime errors are thrown: "ResizeObserver loop

package/lib/styles/index.css

@@ -1173,6 +1173,46 @@ fieldset {
   padding: 32px 40px;
 }
 
+.vuiCard--expandable .vuiCard__expandableButton {
+  display: block;
+  width: 100%;
+  padding: 16px 24px;
+  text-align: left;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.vuiCard--expandable .vuiCard__expandableButton:hover {
+  background-color: var(--vui-color-light-shade);
+}
+.vuiCard--expandable .vuiCard__expandableButton:focus {
+  outline: 2px solid var(--vui-color-primary);
+  outline-offset: -2px;
+}
+.vuiCard--expandable .vuiCard__expandableIcon {
+  transition: transform 0.2s ease-in-out;
+}
+.vuiCard--expandable .vuiCard__expandableHeader {
+  text-align: inherit;
+}
+
+.vuiCard--expandable.vuiCard--s .vuiCard__expandableButton {
+  padding: 16px 24px;
+}
+
+.vuiCard--expandable.vuiCard--m .vuiCard__expandableButton {
+  padding: 24px 32px;
+}
+
+.vuiCard--expandable.vuiCard--l .vuiCard__expandableButton {
+  padding: 32px 40px;
+}
+
+.vuiCard--expandable.vuiCard--outlined .vuiCard__body {
+  border-top: 1px solid var(--vui-color-border-light);
+}
+
 .vuiChatTurn {
   position: relative;
   left: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "13.3.1",
+  "version": "13.5.0",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",