@vectara/vectara-ui 18.2.1 → 18.2.2

package/lib/components/topicButton/TopicButton.d.ts

@@ -21,6 +21,7 @@ type Props = {
     buttonStyle?: TopicButtonStyle;
     badges?: TopicButtonBadge[];
     icon?: React.ReactNode;
+    isDisabled?: boolean;
 };
-export declare const VuiTopicButton: ({ children, className, href, onClick, title, fullWidth, color, buttonStyle, badges, icon, target, track, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiTopicButton: ({ children, className, href, onClick, title, fullWidth, color, buttonStyle, badges, icon, isDisabled, target, track, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/topicButton/TopicButton.js

@@ -22,11 +22,12 @@ import { VuiFlexItem } from "../flex/FlexItem";
 export const TOPIC_BUTTON_COLOR = ["primary", "accent"];
 export const TOPIC_BUTTON_STYLE = ["compactRow", "compactGrid"];
 export const VuiTopicButton = (_a) => {
-    var { children, className, href, onClick, title, fullWidth, color = "primary", buttonStyle, badges, icon, target, track } = _a, rest = __rest(_a, ["children", "className", "href", "onClick", "title", "fullWidth", "color", "buttonStyle", "badges", "icon", "target", "track"]);
+    var { children, className, href, onClick, title, fullWidth, color = "primary", buttonStyle, badges, icon, isDisabled, target, track } = _a, rest = __rest(_a, ["children", "className", "href", "onClick", "title", "fullWidth", "color", "buttonStyle", "badges", "icon", "isDisabled", "target", "track"]);
     const { createLink } = useVuiContext();
     const classes = classNames("vuiTopicButton", `vuiTopicButton--${color}`, className, {
         [`vuiTopicButton--${buttonStyle}`]: buttonStyle,
-        "vuiTopicButton--fullWidth": fullWidth
+        "vuiTopicButton--fullWidth": fullWidth,
+        "vuiTopicButton--isDisabled": isDisabled
     });
     const titleNode = title && (_jsx(VuiTitle, Object.assign({ size: buttonStyle ? "xs" : "s" }, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: color }, { children: title })) }) })));
     const badgeNodes = badges === null || badges === void 0 ? void 0 : badges.map((badge, index) => (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiBadge, Object.assign({ color: badge.color, size: "s" }, { children: badge.label })) }), index)));
@@ -42,9 +43,10 @@ export const VuiTopicButton = (_a) => {
     else {
         content = (_jsx(VuiFlexContainer, Object.assign({ alignItems: "start", spacing: "m" }, { children: _jsxs(VuiFlexItem, Object.assign({ grow: true }, { children: [title && (_jsxs(_Fragment, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "s" }, { children: [icon, _jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: titleNode })), badgeNodes] })), children && _jsx(VuiSpacer, { size: "xxs" })] })), children] })) })));
     }
-    if (href) {
+    // Anchor tags can't be disabled, so we render a disabled button instead.
+    if (href && !isDisabled) {
         return createLink(Object.assign(Object.assign({ className: classes, href,
             onClick, children: content, target }, rest), getTrackingProps(track)));
     }
-    return (_jsx("button", Object.assign({ className: classes, onClick: onClick, type: "button" }, rest, { children: content })));
+    return (_jsx("button", Object.assign({ className: classes, onClick: onClick, type: "button", disabled: isDisabled }, rest, { children: content })));
 };

package/lib/components/topicButton/_index.scss

@@ -19,6 +19,11 @@
   width: 100%;
 }
 
+.vuiTopicButton--isDisabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .vuiTopicButton--primary:hover {
   box-shadow: $shadowLargeEnd, var(--vui-color-primary-shade) 0 0 1px 1px;
 }

package/lib/styles/index.css

@@ -6007,6 +6007,11 @@ h2.react-datepicker__current-month {
   width: 100%;
 }
 
+.vuiTopicButton--isDisabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .vuiTopicButton--primary:hover {
   box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px, var(--vui-color-primary-shade) 0 0 1px 1px;
 }

package/package.json

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