@vectara/vectara-ui 13.7.0 → 13.9.0

package/lib/components/badge/Badge.js

@@ -27,7 +27,7 @@ export const VuiBadge = (_a) => {
     const classes = classNames(className, "vuiBadge", `vuiBadge--${color}`, {
         "vuiBadge--clickable": onClick !== null && onClick !== void 0 ? onClick : href
     });
-    const content = (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xxs" }, { children: [isSelected && (_jsx(VuiFlexItem, { children: _jsx(VuiIcon, Object.assign({ size: "xs", color: "inherit", className: "vuiBadge__icon" }, { children: _jsx(BiCheck, {}) })) })), _jsx(VuiFlexItem, Object.assign({ id: id }, { children: children })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Remove", "aria-describedby": id, size: "xs", color: "subdued", className: "vuiBadge__icon", onClick: (e) => {
+    const content = (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xxs" }, { children: [isSelected && (_jsx(VuiFlexItem, { children: _jsx(VuiIcon, Object.assign({ size: "xs", color: "inherit", className: "vuiBadge__icon" }, { children: _jsx(BiCheck, {}) })) })), _jsx(VuiFlexItem, Object.assign({ id: id }, { children: _jsx("div", Object.assign({ className: "vuiBadge__content" }, { children: children })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Remove", "aria-describedby": id, size: "xs", color: "subdued", className: "vuiBadge__icon", onClick: (e) => {
                         e.stopPropagation();
                         onClose === null || onClose === void 0 ? void 0 : onClose();
                     }, icon: _jsx(VuiIcon, Object.assign({ size: "xs" }, { children: _jsx(BiX, {}) })) }) }))] })));

package/lib/components/badge/_index.scss

@@ -20,6 +20,14 @@
   height: min-content !important;
 }
 
+.vuiBadge__content {
+  // text-overflow doesn't work on flexbox elements.
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 // Color
 $color: (
   accent: (

package/lib/components/flex/_flexItem.scss

@@ -2,6 +2,8 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  // Required to enable text truncation within flex items.
+  min-width: 0;
 }
 
 .vuiFlexItem--truncate {

package/lib/styles/index.css

@@ -574,6 +574,13 @@ fieldset {
   height: min-content !important;
 }
 
+.vuiBadge__content {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .vuiBadge--accent {
   color: var(--vui-color-accent-shade) !important;
   background-color: rgba(var(--vui-color-accent-shade-rgb), 0.1);
@@ -2476,6 +2483,7 @@ h2.react-datepicker__current-month {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  min-width: 0;
 }
 
 .vuiFlexItem--truncate {

package/lib/utils/index.d.ts

@@ -1,2 +1,5 @@
 export { formatDate } from "./formatDate";
 export { truncateStart, truncateEnd } from "./truncateString";
+export { testIdify } from "./testIdify";
+export { copyToClipboard } from "./copyToClipboard";
+export { createId } from "./createId";

package/lib/utils/index.js

@@ -1,2 +1,5 @@
 export { formatDate } from "./formatDate";
 export { truncateStart, truncateEnd } from "./truncateString";
+export { testIdify } from "./testIdify";
+export { copyToClipboard } from "./copyToClipboard";
+export { createId } from "./createId";

package/lib/utils/testIdify.d.ts

@@ -0,0 +1 @@
+export declare const testIdify: (str?: string) => string;

package/lib/utils/testIdify.js

@@ -0,0 +1,7 @@
+// Convert a string into a value that's safe to use as a data-testid attribute.
+export const testIdify = (str) => {
+    if (!str) {
+        return "";
+    }
+    return str.replace(/ /g, "-").replace(/[@.+]/g, "-");
+};

package/lib/utils/testIdify.test.d.ts

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

package/lib/utils/testIdify.test.js

@@ -0,0 +1,12 @@
+import { testIdify } from "./testIdify";
+describe("testIdify", () => {
+    test("replaces spaces with dashes", () => {
+        expect(testIdify("selectPromptTemplateButton-Custom prompt template-1.0")).toBe("selectPromptTemplateButton-Custom-prompt-template-1-0");
+    });
+    test("replaces @ . and + with dashes", () => {
+        expect(testIdify("user@example.com+tag")).toBe("user-example-com-tag");
+    });
+    test("handles multiple special characters", () => {
+        expect(testIdify("prompt@vectara.com + settings")).toBe("prompt-vectara-com---settings");
+    });
+});

package/package.json

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