@homebound/beam 2.258.0 → 2.260.0

package/dist/components/Layout/RightPaneLayout/RightPaneLayout.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement } from "react";
 import { Palette } from "../../../Css";
-export declare function RightPaneLayout({ children, paneBgColor, paneWidth, }: {
+export declare function RightPaneLayout({ children, paneBgColor, paneWidth, defaultPaneContent, }: {
     children: ReactElement;
     paneBgColor?: Palette;
     paneWidth?: number;
+    defaultPaneContent?: ReactElement;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Layout/RightPaneLayout/RightPaneLayout.js

@@ -6,7 +6,7 @@ const framer_motion_1 = require("framer-motion");
 const react_1 = require("react");
 const Css_1 = require("../../../Css");
 const RightPaneContext_1 = require("./RightPaneContext");
-function RightPaneLayout({ children, paneBgColor = Css_1.Palette.White, paneWidth = 450, }) {
+function RightPaneLayout({ children, paneBgColor = Css_1.Palette.White, paneWidth = 450, defaultPaneContent, }) {
     const { isRightPaneOpen, rightPaneContent, clearPane, closePane } = (0, RightPaneContext_1.useRightPaneContext)();
     // Close pane on page unmount because otherwise the next page that has a right pane will show our stale content
     (0, react_1.useEffect)(() => {
@@ -14,12 +14,21 @@ function RightPaneLayout({ children, paneBgColor = Css_1.Palette.White, paneWidt
             closePane();
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h100.df.overflowXHidden.$, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.w(`calc(100% - ${paneWidth + 24}px)`)
-                        .add("transition", "width .2s linear")
-                        .h100.mr3.overflowXAuto.if(!isRightPaneOpen).w100.mr0.$, children: children }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isRightPaneOpen && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { layout: "position", "data-testid": "rightPaneContent", css: Css_1.Css.bgColor(paneBgColor).h100.wPx(paneWidth).$, 
-                        // Keeping initial x to offset pane width and space between panel and page content
-                        initial: { x: paneWidth + 24 }, animate: { x: 0 }, transition: { ease: "linear", duration: 0.2 }, exit: { transition: { ease: "linear", duration: 0.2 }, x: paneWidth }, 
-                        // Clear the content of the detail pane when the animation is completed and only when pane is closing
-                        onAnimationComplete: (definition) => definition.x !== 0 && clearPane(), children: rightPaneContent }, "rightPane")) })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h100.df.overflowXHidden.$, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { css: {
+                        ...Css_1.Css.w(`calc(100% - ${paneWidth + 24}px)`).add("transition", "width .2s linear").h100.mr3.overflowXAuto.$,
+                        ...Css_1.Css.if(!isRightPaneOpen).w100.mr0.$,
+                        ...Css_1.Css.if(!!defaultPaneContent).w(`calc(100% - ${paneWidth + 24}px)`).mr3.$,
+                    }, children: children }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.position("relative").if(!!defaultPaneContent).wPx(paneWidth).$, children: [defaultPaneContent && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h100
+                                .wPx(paneWidth)
+                                .left(0)
+                                .position("absolute")
+                                .add("transition", "all .3s ease-in-out")
+                                .if(isRightPaneOpen)
+                                .add("opacity", 0)
+                                .left(100).$, children: defaultPaneContent })), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isRightPaneOpen && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { layout: "position", "data-testid": "rightPaneContent", css: Css_1.Css.bgColor(paneBgColor).h100.wPx(paneWidth).$, 
+                                // Keeping initial x to offset pane width and space between panel and page content
+                                initial: { x: paneWidth + 24, position: "absolute" }, animate: { x: 0 }, transition: { ease: "linear", duration: 0.2 }, exit: { transition: { ease: "linear", duration: 0.2 }, x: paneWidth }, 
+                                // Clear the content of the detail pane when the animation is completed and only when pane is closing
+                                onAnimationComplete: (definition) => definition.x !== 0 && clearPane(), children: rightPaneContent }, "rightPane")) })] })] }) }));
 }
 exports.RightPaneLayout = RightPaneLayout;

package/dist/inputs/NumberField.d.ts

@@ -35,6 +35,7 @@ export interface NumberFieldProps extends Pick<PresentationFieldProps, "labelSty
     borderless?: boolean;
     sizeToContent?: boolean;
     alwaysShowHelperText?: boolean;
+    positiveOnly?: boolean;
 }
 export declare function NumberField(props: NumberFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function formatValue(value: number, factor: number, numFractionDigits: number | undefined, numIntegerDigits: number | undefined): number | undefined;
+export declare function formatValue(value: number, factor: number, numFractionDigits: number | undefined, numIntegerDigits: number | undefined, positiveOnly?: boolean): number | undefined;

package/dist/inputs/NumberField.js

@@ -16,7 +16,7 @@ function NumberField(props) {
     // Determine default alignment based on presentation context
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
     const alignment = (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.numberAlignment) === "right" ? Css_1.Css.tr.jcfe.$ : Css_1.Css.tl.jcfs.$;
-    const { disabled, required, readOnly, type, label, onBlur, onFocus, errorMsg, helperText, value, onChange, xss, displayDirection = false, numFractionDigits = type === "dollars" ? 2 : undefined, truncate = false, onEnter, numberFormatOptions, numIntegerDigits, useGrouping = true, sizeToContent = false, ...otherProps } = props;
+    const { disabled, required, readOnly, type, label, onBlur, onFocus, errorMsg, helperText, value, onChange, xss, displayDirection = false, numFractionDigits = type === "dollars" ? 2 : undefined, truncate = false, onEnter, numberFormatOptions, numIntegerDigits, useGrouping = true, sizeToContent = false, positiveOnly = false, ...otherProps } = props;
     const isDisabled = !!disabled;
     const isReadOnly = !!readOnly;
     const factor = type === "percent" || type === "cents" ? 100 : type === "basisPoints" ? 10000 : 1;
@@ -56,7 +56,7 @@ function NumberField(props) {
         value: valueRef.current.wip ? valueRef.current.value : value === undefined ? Number.NaN : value / factor,
         // // This is called on blur with the final/committed value.
         onChange: (value) => {
-            onChange(formatValue(value, factor, numFractionDigits, numIntegerDigits));
+            onChange(formatValue(value, factor, numFractionDigits, numIntegerDigits, positiveOnly));
         },
         onFocus: () => {
             valueRef.current = { wip: true, value: value === undefined ? Number.NaN : value / factor };
@@ -92,11 +92,11 @@ function NumberField(props) {
         // This is called on each DOM change, to push the latest value into the field
         onChange: (rawInputValue) => {
             const parsedValue = numberParser.parse(rawInputValue || "");
-            onChange(formatValue(parsedValue, factor, numFractionDigits, numIntegerDigits));
+            onChange(formatValue(parsedValue, factor, numFractionDigits, numIntegerDigits, positiveOnly));
         }, inputRef: inputRef, onBlur: onBlur, onFocus: onFocus, errorMsg: errorMsg, helperText: helperText, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), ...otherProps }));
 }
 exports.NumberField = NumberField;
-function formatValue(value, factor, numFractionDigits, numIntegerDigits) {
+function formatValue(value, factor, numFractionDigits, numIntegerDigits, positiveOnly = false) {
     // We treat percents & cents as (mostly) integers, while useNumberField wants decimals, so
     // undo that via `* factor` and `Math.round`, but also keep any specifically-requested `numFractionDigits`,
     // i.e. for `type=percent value=12.34`, `value` will be `0.1234` that we want turn into `12.34`.
@@ -104,7 +104,7 @@ function formatValue(value, factor, numFractionDigits, numIntegerDigits) {
     // Reverse the integer/decimal conversion
     const decimalAdjusted = Number.isNaN(value)
         ? undefined
-        : Math.round(value * factor * maybeAdjustForDecimals) / maybeAdjustForDecimals;
+        : Math.round((positiveOnly ? Math.abs(value) : value) * factor * maybeAdjustForDecimals) / maybeAdjustForDecimals;
     if (numIntegerDigits === undefined || decimalAdjusted === undefined) {
         return decimalAdjusted;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.258.0",
+  "version": "2.260.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",