@vectara/vectara-ui 15.6.2 → 15.7.0

package/lib/components/form/input/NumberInput.d.ts

@@ -5,4 +5,5 @@ export declare const VuiNumberInput: import("react").ForwardRefExoticComponent<O
     max?: number | undefined;
     min?: number | undefined;
     step?: number | undefined;
+    allowUndefined?: boolean | undefined;
 } & import("react").RefAttributes<HTMLInputElement | null>>;

package/lib/components/form/input/NumberInput.js

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect, useState } from "react";
 import { VuiBasicInput } from "./BasicInput";
 export const VuiNumberInput = forwardRef((_a, ref) => {
-    var { value, onChange, max, min, step } = _a, rest = __rest(_a, ["value", "onChange", "max", "min", "step"]);
+    var { value, onChange, max, min, step, allowUndefined } = _a, rest = __rest(_a, ["value", "onChange", "max", "min", "step", "allowUndefined"]);
     const [localValue, setLocalValue] = useState(value);
     // This is a hacky solution to the number input misbehaving on Firefox.
     // If we were to apply the value and onChange values directly to the
@@ -26,17 +26,21 @@ export const VuiNumberInput = forwardRef((_a, ref) => {
     // For some reason, using a useState hook to store the value doesn't have
     // this problem.
     useEffect(() => {
-        // Reflect the upstream value when it changes. Ignore 0
-        // because that indicates the user has entered a decimal point.
-        if (value !== 0) {
+        // Reflect the upstream value when it changes. Ignore 0 because that
+        // indicates the user has entered a decimal point (Firefox workaround).
+        // When allowUndefined is on, also ignore undefined — otherwise the
+        // parent reflecting undefined back would clear the input mid-typing.
+        const isUndefined = !(allowUndefined && value === undefined);
+        if (value !== 0 && isUndefined) {
             setLocalValue(value);
         }
     }, [value]);
-    // Part of the hacky solution above.
+    // Propagate localValue changes upstream. Without allowUndefined, an
+    // undefined localValue (empty input) is coerced to 0 so existing
+    // consumers always receive a number. With allowUndefined, undefined
+    // passes through so consumers can treat empty as "no value."
     useEffect(() => {
-        // Set value locally so an undefined value doesn't reset it to 0.
-        // Pass the value upstream, e.g. so it can be persisted.
-        onChange(localValue !== null && localValue !== void 0 ? localValue : 0);
+        onChange(allowUndefined ? localValue : localValue !== null && localValue !== void 0 ? localValue : 0);
     }, [localValue]);
     const onChangeValue = (e) => {
         // Enable resetting the value to undefined.

package/lib/components/modal/Modal.js

@@ -45,10 +45,10 @@ export const VuiModal = (_a) => {
         }, 0);
     };
     const classes = classNames("vuiModal", `vuiModal--${color}`, `vuiModal--${size}`, className);
-    return (_jsx(VuiPortal, { children: isOpen && (_jsx(VuiScreenBlock, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: canClickOutsideToClose ? onCloseDelayed : undefined, 
+    return (_jsx(VuiPortal, { children: isOpen && (_jsx(VuiScreenBlock, Object.assign({ type: "modal" }, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: canClickOutsideToClose ? onCloseDelayed : undefined, 
                 // Enable manual focus return to work.
                 returnFocus: false, 
                 // Enable focus on contents when it's open,
                 // but enable manual focus return to work when it's closed.
-                autoFocus: isOpen }, { children: _jsx("div", Object.assign({ className: "vuiModalContainer" }, getOverlayProps("modalTitle"), { children: _jsxs("div", Object.assign({ className: classes }, rest, { children: [_jsx("div", Object.assign({ className: "vuiModalHeader" }, { children: _jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [icon && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "l" }, { children: icon })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiModalHeader__title" }, { children: _jsx(DrawerTitle, Object.assign({ id: "modalTitle" }, { children: title })) })) }))] })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Close", "data-testid": "modalCloseButton", onClick: onCloseDelayed, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: _jsx(BiX, {}) })) }) }))] })) })), _jsx("div", Object.assign({ className: "vuiModalContent" }, { children: _jsx("div", Object.assign({ className: "vuiModalContent__inner" }, { children: children })) }))] })) })) })) }, key)) }));
+                autoFocus: isOpen }, { children: _jsx("div", Object.assign({ className: "vuiModalContainer" }, getOverlayProps("modalTitle"), { children: _jsxs("div", Object.assign({ className: classes }, rest, { children: [_jsx("div", Object.assign({ className: "vuiModalHeader" }, { children: _jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [icon && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "l" }, { children: icon })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiModalHeader__title" }, { children: _jsx(DrawerTitle, Object.assign({ id: "modalTitle" }, { children: title })) })) }))] })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Close", "data-testid": "modalCloseButton", onClick: onCloseDelayed, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: _jsx(BiX, {}) })) }) }))] })) })), _jsx("div", Object.assign({ className: "vuiModalContent" }, { children: _jsx("div", Object.assign({ className: "vuiModalContent__inner" }, { children: children })) }))] })) })) })) }), key)) }));
 };

package/lib/components/screenBlock/ScreenBlock.d.ts

@@ -2,6 +2,7 @@ type Props = {
     onClick?: () => void;
     children: React.ReactNode;
     color?: "neutral" | "primary" | "danger" | "success";
+    type?: "default" | "modal";
 };
-export declare const VuiScreenBlock: ({ onClick, children, color }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiScreenBlock: ({ onClick, children, color, type }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/screenBlock/ScreenBlock.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
-export const VuiScreenBlock = ({ onClick, children, color = "neutral" }) => {
-    const classes = classNames("vuiScreenBlock", `vuiScreenBlock--${color}`);
+export const VuiScreenBlock = ({ onClick, children, color = "neutral", type = "default" }) => {
+    const classes = classNames("vuiScreenBlock", `vuiScreenBlock--${color}`, `vuiScreenBlock--${type}`);
     return (_jsxs("div", Object.assign({ className: classes }, { children: [children, _jsx("div", { className: "vuiScreenBlock__mask", onClick: onClick })] })));
 };

package/lib/components/screenBlock/_index.scss

@@ -4,12 +4,19 @@
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: $screenBlockZIndex;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.vuiScreenBlock--default {
+  z-index: $screenBlockZIndex;
+}
+
+.vuiScreenBlock--modal {
+  z-index: $modalZIndex;
+}
+
 .vuiScreenBlock__mask {
   width: 100%;
   height: 100%;

package/lib/styles/index.css

@@ -4493,12 +4493,19 @@ h2.react-datepicker__current-month {
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 10;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.vuiScreenBlock--default {
+  z-index: 10;
+}
+
+.vuiScreenBlock--modal {
+  z-index: 12;
+}
+
 .vuiScreenBlock__mask {
   width: 100%;
   height: 100%;

package/package.json

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