@vectara/vectara-ui 9.13.0 → 9.14.0

package/lib/components/index.d.ts

@@ -69,6 +69,7 @@ import { SPINNER_COLOR, SPINNER_SIZE } from "./spinner/types";
 import { Stat, VuiStatList } from "./statList/StatList";
 import { VuiStatus } from "./status/Status";
 import { VuiSteps, StepStatus, StepSize, VuiStepProps } from "./steps/Steps";
+import { SKELETON_COLOR, VuiSkeleton } from "./skeleton/Skeleton";
 import { VuiSummary } from "./summary/Summary";
 import { VuiSummaryCitation } from "./summary/SummaryCitation";
 import { VuiTable } from "./table/Table";
@@ -86,4 +87,4 @@ import { VuiTooltip } from "./tooltip/Tooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 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, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, 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, VuiHorizontalRule, VuiIcon, 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, VuiStatList, VuiStatus, VuiSteps, VuiSummary, 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, 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, VuiHorizontalRule, VuiIcon, 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, 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

@@ -62,6 +62,7 @@ import { SPINNER_COLOR, SPINNER_SIZE } from "./spinner/types";
 import { VuiStatList } from "./statList/StatList";
 import { VuiStatus } from "./status/Status";
 import { VuiSteps } from "./steps/Steps";
+import { SKELETON_COLOR, VuiSkeleton } from "./skeleton/Skeleton";
 import { VuiSummary } from "./summary/Summary";
 import { VuiSummaryCitation } from "./summary/SummaryCitation";
 import { VuiTable } from "./table/Table";
@@ -78,4 +79,4 @@ import { VuiToggle } from "./toggle/Toggle";
 import { VuiTooltip } from "./tooltip/Tooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, 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, VuiHorizontalRule, VuiIcon, 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, VuiStatList, VuiStatus, VuiSteps, VuiSummary, 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, 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, VuiHorizontalRule, VuiIcon, 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, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,10 @@
+export declare const SKELETON_COLOR: readonly ["accent", "primary", "danger", "warning", "success", "neutral", "subdued"];
+type Props = {
+    rows?: number;
+    color?: (typeof SKELETON_COLOR)[number];
+    active?: boolean;
+    height?: string | number;
+    className?: string;
+};
+export declare const VuiSkeleton: ({ rows, color, active, height, className }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/skeleton/Skeleton.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+export const SKELETON_COLOR = ["accent", "primary", "danger", "warning", "success", "neutral", "subdued"];
+export const VuiSkeleton = ({ rows = 2.75, color = "subdued", active = true, height = "1rem", className }) => {
+    const classes = classNames(className, "vuiSkeleton__row", `vuiSkeleton--${color}`, {
+        "vuiSkeleton--active": active
+    });
+    const fullRows = Math.floor(rows);
+    const partialRowWidth = rows % 1;
+    const renderRows = () => {
+        const rowElements = [];
+        // Render full rows
+        for (let i = 0; i < fullRows; i++) {
+            rowElements.push(_jsx("div", { className: classes, style: { height } }, `full-${i}`));
+        }
+        // Render partial row if there's a decimal component
+        if (partialRowWidth > 0) {
+            rowElements.push(_jsx("div", { className: classes, style: { width: `${partialRowWidth * 100}%`, height } }, "partial"));
+        }
+        return rowElements;
+    };
+    return (_jsx(_Fragment, { children: renderRows() }));
+};

package/lib/components/skeleton/_index.scss

@@ -0,0 +1,68 @@
+@use "sass:map";
+
+.vuiSkeleton__row {
+  display: block;
+  width: 100%;
+  height: 1rem;
+  border-radius: 4px;
+  margin-bottom: 0.5rem;
+  position: relative;
+  overflow: hidden;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+@keyframes vuiSkeletonShimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.vuiSkeleton__row.vuiSkeleton--active {
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+    animation: vuiSkeletonShimmer 2s ease-in-out infinite;
+  }
+}
+
+// Color variants
+$color: (
+  accent: (
+    "backgroundColor": $colorAccentLighterShade
+  ),
+  primary: (
+    "backgroundColor": $colorPrimaryLighterShade
+  ),
+  success: (
+    "backgroundColor": $colorSuccessLighterShade
+  ),
+  danger: (
+    "backgroundColor": $colorDangerLighterShade
+  ),
+  warning: (
+    "backgroundColor": $colorWarningLighterShade
+  ),
+  neutral: (
+    "backgroundColor": $colorMediumShade
+  ),
+  subdued: (
+    "backgroundColor": $colorLightShade
+  )
+);
+
+@each $colorName, $colorValue in $color {
+  .vuiSkeleton__row.vuiSkeleton--#{$colorName} {
+    background-color: #{map.get($colorValue, "backgroundColor")};
+  }
+}

package/lib/styles/index.css

@@ -405,17 +405,19 @@ fieldset {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  text-decoration: none;
-  border-radius: 4px;
-  line-height: 1.1;
-  border-top: 1px solid #ffffff;
-  border-bottom: 1px solid #ffffff;
 }
 .vuiAppSideNavLink * {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.vuiAppSideNavLink {
+  text-decoration: none;
+  border-radius: 4px;
+  line-height: 1.1;
+  border-top: 1px solid #ffffff;
+  border-bottom: 1px solid #ffffff;
+}
 .vuiAppSideNavLink:hover {
   background-color: #f1f4f6;
   color: #045dda;
@@ -1385,6 +1387,19 @@ fieldset {
   width: 9px;
 }
 
+/* sr-only utility class for accessibility */
+.react-datepicker__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .react-datepicker-wrapper {
   display: inline-block;
   padding: 0;
@@ -3913,6 +3928,66 @@ h2.react-datepicker__current-month {
   height: 100px;
 }
 
+.vuiSkeleton__row {
+  display: block;
+  width: 100%;
+  height: 1rem;
+  border-radius: 4px;
+  margin-bottom: 0.5rem;
+  position: relative;
+  overflow: hidden;
+}
+.vuiSkeleton__row:last-child {
+  margin-bottom: 0;
+}
+
+@keyframes vuiSkeletonShimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+.vuiSkeleton__row.vuiSkeleton--active::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  animation: vuiSkeletonShimmer 2s ease-in-out infinite;
+}
+
+.vuiSkeleton__row.vuiSkeleton--accent {
+  background-color: #eee7ff;
+}
+
+.vuiSkeleton__row.vuiSkeleton--primary {
+  background-color: #f1f7ff;
+}
+
+.vuiSkeleton__row.vuiSkeleton--success {
+  background-color: #e2f2e0;
+}
+
+.vuiSkeleton__row.vuiSkeleton--danger {
+  background-color: #fff1f1;
+}
+
+.vuiSkeleton__row.vuiSkeleton--warning {
+  background-color: #ffeed4;
+}
+
+.vuiSkeleton__row.vuiSkeleton--neutral {
+  background-color: #cbd1de;
+}
+
+.vuiSkeleton__row.vuiSkeleton--subdued {
+  background-color: #f1f4f6;
+}
+
 .vuiStatName {
   width: 120px;
   word-break: break-word;

package/package.json

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