@vectara/vectara-ui 15.1.0 → 15.3.0

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

@@ -25,6 +25,7 @@ export type BaseButtonProps = {
     title?: string;
     isSubmit?: boolean;
     isLoading?: boolean;
+    truncate?: boolean;
 };
 export declare const BaseButton: import("react").ForwardRefExoticComponent<BaseButtonProps & {
     spinnerColor?: "accent" | "primary" | "success" | "warning" | "danger" | "subdued" | "empty" | "dark" | undefined;

package/lib/components/button/BaseButton.js

@@ -27,7 +27,7 @@ const sizeToSpinnerSizeMap = {
     l: "m"
 };
 export const BaseButton = forwardRef((_a, ref) => {
-    var { children, icon, iconSide = "left", align = "center", className, size = "m", fullWidth, onClick, onMouseOver, onMouseOut, onMouseMove, tabIndex, isInert, isDisabled, href, target, track, htmlFor, isSubmit, isLoading, spinnerColor } = _a, rest = __rest(_a, ["children", "icon", "iconSide", "align", "className", "size", "fullWidth", "onClick", "onMouseOver", "onMouseOut", "onMouseMove", "tabIndex", "isInert", "isDisabled", "href", "target", "track", "htmlFor", "isSubmit", "isLoading", "spinnerColor"]);
+    var { children, icon, iconSide = "left", align = "center", className, size = "m", fullWidth, onClick, onMouseOver, onMouseOut, onMouseMove, tabIndex, isInert, isDisabled, href, target, track, htmlFor, isSubmit, isLoading, spinnerColor, truncate } = _a, rest = __rest(_a, ["children", "icon", "iconSide", "align", "className", "size", "fullWidth", "onClick", "onMouseOver", "onMouseOut", "onMouseMove", "tabIndex", "isInert", "isDisabled", "href", "target", "track", "htmlFor", "isSubmit", "isLoading", "spinnerColor", "truncate"]);
     const { createLink } = useVuiContext();
     const classes = classNames("vuiBaseButton", className, `vuiBaseButton--${size}`, alignToClassMap[align], {
         "vuiBaseButton-isInert": isInert,
@@ -62,10 +62,13 @@ export const BaseButton = forwardRef((_a, ref) => {
             _jsxs("button", Object.assign({ className: classes, tabIndex: -1, ref: ref }, { children: [iconContainer, children] }))), target,
             tabIndex }, rest), getTrackingProps(track)));
     }
+    const labelClasses = classNames({
+        "vuiBaseButtonLabel--truncate": truncate
+    });
     const props = Object.assign({ onClick,
         onMouseOver,
         onMouseOut,
         onMouseMove,
         tabIndex, type: isSubmit ? "submit" : "button", disabled: isDisabled }, rest);
-    return (_jsxs("button", Object.assign({ className: classes }, props, { ref: ref }, { children: [iconContainer, children] })));
+    return (_jsxs("button", Object.assign({ className: classes }, props, { ref: ref }, { children: [iconContainer, _jsx("span", Object.assign({ className: labelClasses }, { children: children }))] })));
 });

package/lib/components/button/baseButton.scss

@@ -25,7 +25,7 @@
   font-weight: 500;
   box-shadow: $shadowSmallStart;
   transition: all $transitionSpeed;
-  line-height: 1;
+  line-height: 1.2;
   cursor: pointer;
 }
 
@@ -94,3 +94,8 @@
   padding: $sizeS $sizeL;
   height: 47px;
 }
+
+.vuiBaseButtonLabel--truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/lib/components/popover/Popover.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export type AnchorSide = "left" | "right" | "rightUp" | "leftUp" | "upLeft" | "upRight";
+export type AnchorSide = "left" | "right" | "rightUp" | "rightDown" | "leftUp" | "leftDown" | "upLeft" | "upRight";
 export type Props = {
     button: React.ReactElement;
     children?: React.ReactNode;

package/lib/components/popover/Popover.js

@@ -26,12 +26,24 @@ const calculatePopoverPosition = (button, anchorOptions) => {
         const adjustedLeft = left + width + offsetX;
         return { top: `${adjustedTop}px`, left: `${adjustedLeft}px` };
     }
+    if (anchorSide === "rightDown") {
+        // Anchor popover to the right side of the button, extending downwards.
+        const adjustedTop = top - offsetY + document.documentElement.scrollTop;
+        const adjustedLeft = left + width + offsetX;
+        return { top: `${adjustedTop}px`, left: `${adjustedLeft}px` };
+    }
     if (anchorSide === "leftUp") {
         // Anchor popover to the left side of the button, extending upwards.
         const adjustedTop = top + height + document.documentElement.scrollTop;
         const adjustedRight = document.documentElement.clientWidth - left + offsetX;
         return { top: `${adjustedTop}px`, right: `${adjustedRight}px` };
     }
+    if (anchorSide === "leftDown") {
+        // Anchor popover to the left side of the button, extending downwards.
+        const adjustedTop = top - offsetY + document.documentElement.scrollTop;
+        const adjustedRight = document.documentElement.clientWidth - left + offsetX;
+        return { top: `${adjustedTop}px`, right: `${adjustedRight}px` };
+    }
     if (anchorSide === "upLeft") {
         // Anchor popover above the button, aligned to the left edge.
         const adjustedBottom = document.documentElement.clientHeight - top + offsetY;

package/lib/styles/index.css

@@ -705,7 +705,7 @@ fieldset {
   font-weight: 500;
   box-shadow: rgba(60, 64, 67, 0.3) 0px 0px 0px 0px, rgba(60, 64, 67, 0.15) 0px 0px 0px 0px;
   transition: all 0.2s;
-  line-height: 1;
+  line-height: 1.2;
   cursor: pointer;
 }
 
@@ -771,6 +771,11 @@ fieldset {
   height: 47px;
 }
 
+.vuiBaseButtonLabel--truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .vuiButtonPrimary:hover {
   box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
 }

package/package.json

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