@vectara/vectara-ui 20.0.0 → 20.1.0

package/lib/components/flex/FlexContainer.d.ts

@@ -1,31 +1,10 @@
 import { ReactNode } from "react";
-import { FlexSpacing } from "./types";
-declare const alignItemsToClassNameMap: {
-    readonly baseline: "vuiFlexContainer--alignItemsBaseline";
-    readonly center: "vuiFlexContainer--alignItemsCenter";
-    readonly end: "vuiFlexContainer--alignItemsEnd";
-    readonly start: "vuiFlexContainer--alignItemsStart";
-    readonly stretch: "vuiFlexContainer--alignItemsStretch";
-};
-declare const directionToClassNameMap: {
-    readonly column: "vuiFlexContainer--directionColumn";
-    readonly columnReverse: "vuiFlexContainer--directionColumnReverse";
-    readonly row: "vuiFlexContainer--directionRow";
-    readonly rowReverse: "vuiFlexContainer--directionRowReverse";
-};
-declare const justifyContentToClassNameMap: {
-    readonly center: "vuiFlexContainer--justifyContentCenter";
-    readonly end: "vuiFlexContainer--justifyContentEnd";
-    readonly start: "vuiFlexContainer--justifyContentStart";
-    readonly spaceAround: "vuiFlexContainer--justifyContentSpaceAround";
-    readonly spaceBetween: "vuiFlexContainer--justifyContentSpaceBetween";
-    readonly spaceEvenly: "vuiFlexContainer--justifyContentSpaceEvenly";
-};
+import { AlignItemsPosition, FlexDirection, FlexSpacing, JustifyContentPosition } from "./types";
 export type Props = {
     children?: ReactNode;
-    alignItems?: keyof typeof alignItemsToClassNameMap;
-    direction?: keyof typeof directionToClassNameMap;
-    justifyContent?: keyof typeof justifyContentToClassNameMap;
+    alignItems?: AlignItemsPosition;
+    direction?: FlexDirection;
+    justifyContent?: JustifyContentPosition;
     spacing?: FlexSpacing;
     wrap?: boolean;
     className?: string;
@@ -33,4 +12,3 @@ export type Props = {
     inline?: boolean;
 };
 export declare const VuiFlexContainer: ({ children, alignItems, direction, justifyContent, spacing, wrap, className, fullWidth, inline, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/components/flex/types.d.ts

@@ -1,2 +1,8 @@
 export declare const FLEX_SPACING: readonly ["none", "xxs", "xs", "s", "m", "l", "xl", "xxl"];
 export type FlexSpacing = (typeof FLEX_SPACING)[number];
+export declare const ALIGN_ITEMS_POSITION: readonly ["baseline", "center", "end", "start", "stretch"];
+export type AlignItemsPosition = (typeof ALIGN_ITEMS_POSITION)[number];
+export declare const FLEX_DIRECTION: readonly ["column", "columnReverse", "row", "rowReverse"];
+export type FlexDirection = (typeof FLEX_DIRECTION)[number];
+export declare const JUSTIFY_CONTENT_POSITION: readonly ["center", "end", "start", "spaceAround", "spaceBetween", "spaceEvenly"];
+export type JustifyContentPosition = (typeof JUSTIFY_CONTENT_POSITION)[number];

package/lib/components/flex/types.js

@@ -1 +1,11 @@
 export const FLEX_SPACING = ["none", "xxs", "xs", "s", "m", "l", "xl", "xxl"];
+export const ALIGN_ITEMS_POSITION = ["baseline", "center", "end", "start", "stretch"];
+export const FLEX_DIRECTION = ["column", "columnReverse", "row", "rowReverse"];
+export const JUSTIFY_CONTENT_POSITION = [
+    "center",
+    "end",
+    "start",
+    "spaceAround",
+    "spaceBetween",
+    "spaceEvenly"
+];

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { Props as VuiTooltipProps } from "../tooltip/Tooltip";
 export type AnchorSide = "left" | "right" | "rightUp" | "rightDown" | "leftUp" | "leftDown" | "upLeft" | "upRight";
 export type Props = {
     button: React.ReactElement;
@@ -12,5 +13,7 @@ export type Props = {
     anchorSide?: AnchorSide;
     anchorOffsetX?: number;
     anchorOffsetY?: number;
+    tooltip?: string;
+    tooltipProps?: Omit<VuiTooltipProps, "children" | "tip">;
 };
-export declare const VuiPopover: ({ button: originalButton, children, className, header, isOpen, setIsOpen, padding, anchorSide, anchorOffsetX, anchorOffsetY, onClickButton, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiPopover: ({ button: originalButton, children, className, header, isOpen, setIsOpen, padding, anchorSide, anchorOffsetX, anchorOffsetY, onClickButton, tooltip, tooltipProps, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/popover/Popover.js

@@ -15,6 +15,7 @@ import classNames from "classnames";
 import { VuiPortal } from "../portal/Portal";
 import { FocusOn } from "react-focus-on";
 import { VuiItemsInput, VuiNumberInput, VuiTextInput } from "../form";
+import { VuiTooltip } from "../tooltip/Tooltip";
 const calculatePopoverPosition = (button, anchorOptions) => {
     if (!button)
         return undefined;
@@ -64,7 +65,7 @@ const calculatePopoverPosition = (button, anchorOptions) => {
     return { top: `${adjustedTop}px`, right: `${adjustedRight}px` };
 };
 export const VuiPopover = (_a) => {
-    var { button: originalButton, children, className, header, isOpen, setIsOpen, padding, anchorSide = "right", anchorOffsetX = 2, anchorOffsetY = 2, onClickButton } = _a, rest = __rest(_a, ["button", "children", "className", "header", "isOpen", "setIsOpen", "padding", "anchorSide", "anchorOffsetX", "anchorOffsetY", "onClickButton"]);
+    var { button: originalButton, children, className, header, isOpen, setIsOpen, padding, anchorSide = "right", anchorOffsetX = 2, anchorOffsetY = 2, onClickButton, tooltip, tooltipProps } = _a, rest = __rest(_a, ["button", "children", "className", "header", "isOpen", "setIsOpen", "padding", "anchorSide", "anchorOffsetX", "anchorOffsetY", "onClickButton", "tooltip", "tooltipProps"]);
     const returnFocusElRef = useRef(null);
     const buttonRef = useRef(null);
     const [, setPositionMarker] = useState(0);
@@ -105,7 +106,8 @@ export const VuiPopover = (_a) => {
             setIsOpen(!isOpen);
         };
     }
-    const button = cloneElement(originalButton, buttonProps);
+    const clonedButton = cloneElement(originalButton, buttonProps);
+    const button = tooltip !== undefined ? (_jsx(VuiTooltip, Object.assign({ tip: tooltip }, tooltipProps, { children: clonedButton }))) : (clonedButton);
     useEffect(() => {
         const updatePosition = () => {
             // Force a re-render when the window resizes.

package/lib/components/status/Status.d.ts

@@ -1,6 +1,9 @@
+import { AlignItemsPosition, FlexSpacing } from "../flex/types";
 type Props = {
     status: "error" | "warning" | "success" | "info";
     label: string;
+    gap?: FlexSpacing;
+    align?: AlignItemsPosition;
 };
-export declare const VuiStatus: ({ status, label }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiStatus: ({ status, label, gap, align }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/status/Status.js

@@ -17,8 +17,8 @@ const statusToIcon = {
     success: _jsx(BiCheck, {}),
     info: _jsx(BiInfoCircle, {})
 };
-export const VuiStatus = ({ status, label }) => {
+export const VuiStatus = ({ status, label, gap = "xs", align = "center" }) => {
     const color = statusToColor[status];
     const icon = statusToIcon[status];
-    return (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiIcon, Object.assign({ color: color }, { children: icon })) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: color }, { children: label })) }) }) }))] })));
+    return (_jsxs(VuiFlexContainer, Object.assign({ alignItems: align, spacing: gap }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiIcon, Object.assign({ color: color }, { children: icon })) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: color }, { children: label })) }) }) }))] })));
 };

package/package.json

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

package/src/docs/pages/popover/Popover.tsx

@@ -49,6 +49,7 @@ export const Popover = () => {
         isOpen={isOpen}
         setIsOpen={() => setIsOpen(!isOpen)}
         header="Tribes"
+        tooltip="Select a tribe"
         button={
           <VuiButtonSecondary
             color="neutral"

package/src/docs/pages/status/Status.tsx

@@ -1,4 +1,4 @@
-import { VuiSpacer, VuiStatus } from "../../../lib";
+import { VuiSpacer, VuiStatus, VuiTitle } from "../../../lib";
 
 export const Status = () => {
   return (
@@ -17,7 +17,49 @@ export const Status = () => {
 
       <VuiStatus status="info" label="Info" />
 
-      <VuiSpacer size="m" />
+      <VuiSpacer size="l" />
+
+      <div style={{ width: "300px" }}>
+        <VuiTitle size="s">
+          <h3>Multiline message</h3>
+        </VuiTitle>
+
+        <VuiSpacer size="m" />
+
+        <VuiStatus
+          status="error"
+          label="A multiline error message. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis placerat sem, ut mattis sapien."
+          gap="l"
+          align="start"
+        />
+
+        <VuiSpacer size="m" />
+
+        <VuiStatus
+          status="warning"
+          label="A multiline warning message. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis placerat sem, ut mattis sapien."
+          gap="l"
+          align="start"
+        />
+
+        <VuiSpacer size="m" />
+
+        <VuiStatus
+          status="success"
+          label="A multiline success message. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis placerat sem, ut mattis sapien."
+          gap="l"
+          align="start"
+        />
+
+        <VuiSpacer size="m" />
+
+        <VuiStatus
+          status="info"
+          label="A multiline info message. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis placerat sem, ut mattis sapien."
+          gap="l"
+          align="start"
+        />
+      </div>
     </>
   );
 };