@vectara/vectara-ui 13.8.0 → 13.10.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/components/index.d.ts

@@ -39,6 +39,7 @@ import { ICON_COLOR, ICON_SIZE, ICON_TYPE } from "./icon/types";
 import { VuiImage } from "./image/Image";
 import { VuiImagePreview } from "./image/ImagePreview";
 import { InfoListType, VuiInfoList } from "./infoList/InfoList";
+import { InfoListItemType, VuiInfoListItem } from "./infoList/InfoListItem";
 import { VuiInfoMenu } from "./infoMenu/InfoMenu";
 import { VuiInfoTable, InfoTableColumnAlign, InfoTableRow, InfoTableRowType } from "./infoTable/InfoTable";
 import { VuiInProgress } from "./inProgress/InProgress";
@@ -92,5 +93,5 @@ import { VuiTooltip } from "./tooltip/Tooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
-export type { AnchorSide, AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CodeLanguage, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, LinkProps, MenuItem, OptionListItem, Pagination, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, Stat, StepStatus, StepSize, TabSize, Tree, TreeItem, VuiStepProps };
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiSimpleGrid, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoMenu, VuiInfoTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export type { AnchorSide, AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CodeLanguage, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, LinkProps, MenuItem, OptionListItem, Pagination, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, Stat, StepStatus, StepSize, TabSize, Tree, TreeItem, VuiStepProps };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiSimpleGrid, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/index.js

@@ -35,6 +35,7 @@ import { ICON_COLOR, ICON_SIZE, ICON_TYPE } from "./icon/types";
 import { VuiImage } from "./image/Image";
 import { VuiImagePreview } from "./image/ImagePreview";
 import { VuiInfoList } from "./infoList/InfoList";
+import { VuiInfoListItem } from "./infoList/InfoListItem";
 import { VuiInfoMenu } from "./infoMenu/InfoMenu";
 import { VuiInfoTable } from "./infoTable/InfoTable";
 import { VuiInProgress } from "./inProgress/InProgress";
@@ -85,4 +86,4 @@ import { VuiTooltip } from "./tooltip/Tooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiSimpleGrid, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoMenu, VuiInfoTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiSimpleGrid, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/infoList/InfoList.d.ts

@@ -1,7 +1,5 @@
-export type InfoListType = Array<{
-    title: string;
-    value: React.ReactNode;
-}>;
+import { InfoListItemType } from "./InfoListItem";
+export type InfoListType = Array<InfoListItemType>;
 type Props = {
     info: InfoListType;
 };

package/lib/components/infoList/InfoList.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VuiInfoListItem } from "./InfoListItem";
 export const VuiInfoList = ({ info }) => {
-    return (_jsx(_Fragment, { children: info.map((item, index) => (_jsxs("div", Object.assign({ className: "vuiInfoListItem" }, { children: [_jsx("div", Object.assign({ className: "vuiInfoListItem__title" }, { children: item.title })), _jsx("div", Object.assign({ className: "vuiInfoListItem__value" }, { children: item.value }))] }), index))) }));
+    return (_jsx("div", Object.assign({ className: "vuiInfoList" }, { children: info.map((item, index) => (_jsx(VuiInfoListItem, { title: item.title, value: item.value }, index))) })));
 };

package/lib/components/infoList/InfoListItem.d.ts

@@ -0,0 +1,7 @@
+export type InfoListItemType = {
+    title: string;
+    value: React.ReactNode;
+};
+type Props = InfoListItemType;
+export declare const VuiInfoListItem: ({ title, value }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/infoList/InfoListItem.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const VuiInfoListItem = ({ title, value }) => {
+    return (_jsxs("div", Object.assign({ className: "vuiInfoListItem" }, { children: [_jsx("div", Object.assign({ className: "vuiInfoListItem__title" }, { children: title })), _jsx("div", Object.assign({ className: "vuiInfoListItem__value" }, { children: value }))] })));
+};

package/lib/components/infoList/_index.scss

@@ -1,5 +1,5 @@
-.vuiInfoListItem {
-  & + & {
+.vuiInfoList {
+  .vuiInfoListItem + .vuiInfoListItem {
     margin-top: $sizeM;
   }
 }

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 {
@@ -3590,7 +3598,7 @@ h2.react-datepicker__current-month {
   pointer-events: all;
 }
 
-.vuiInfoListItem + .vuiInfoListItem {
+.vuiInfoList .vuiInfoListItem + .vuiInfoListItem {
   margin-top: 16px;
 }
 

package/package.json

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