@homebound/beam 2.211.0 → 2.212.1

package/dist/components/Chip.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chip = exports.ChipTypes = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const PresentationContext_1 = require("./PresentationContext");
+const Tooltip_1 = require("./Tooltip");
 const Css_1 = require("../Css");
 const useTestIds_1 = require("../utils/useTestIds");
 // exporting for using in type prop as constant - this could be moved and become a global list for colors
@@ -17,13 +18,17 @@ exports.ChipTypes = {
 /** Kinda like a chip, but read-only, so no `onClick` or `hover`. */
 function Chip({ type = exports.ChipTypes.neutral, ...props }) {
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    const { text, title = text, xss = {}, compact = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact } = props;
+    const { text, title, xss = {}, compact = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact } = props;
     const tid = (0, useTestIds_1.useTestIds)(props, "chip");
-    return ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: {
-            ...Css_1.Css[compact ? "xs" : "sm"].dif.aic.br16.pl1.px1.pyPx(2).gray900.$,
-            ...typeStyles[type],
-            ...xss,
-        } }, tid, { title: title }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp1.breakAll.$ }, { children: text }), void 0) }), void 0));
+    return (0, Tooltip_1.maybeTooltip)({
+        title,
+        placement: "top",
+        children: ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: {
+                ...Css_1.Css[compact ? "xs" : "sm"].dif.aic.br16.pl1.px1.pyPx(2).gray900.$,
+                ...typeStyles[type],
+                ...xss,
+            } }, tid, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp1.breakAll.$ }, { children: text }), void 0) }), void 0)),
+    });
 }
 exports.Chip = Chip;
 const typeStyles = {

package/dist/components/Filters/NumberRangeFilter.d.ts

@@ -0,0 +1,12 @@
+import { Filter } from "./types";
+import { NumberFieldType } from "../../inputs/NumberField";
+export declare type NumberRangeFilterProps<DV extends NumberRangeFilterValue> = {
+    label: string;
+    numberFieldType?: NumberFieldType;
+    defaultValue?: DV;
+};
+export declare type NumberRangeFilterValue = {
+    min: number;
+    max: number;
+};
+export declare function numberRangeFilter(props: NumberRangeFilterProps<NumberRangeFilterValue>): (key: string) => Filter<NumberRangeFilterValue>;

package/dist/components/Filters/NumberRangeFilter.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.numberRangeFilter = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const BaseFilter_1 = require("./BaseFilter");
+const CompoundField_1 = require("../internal/CompoundField");
+const Label_1 = require("../Label");
+const defaultTestId_1 = require("../../utils/defaultTestId");
+const Css_1 = require("../../Css");
+const NumberField_1 = require("../../inputs/NumberField");
+function numberRangeFilter(props) {
+    return (key) => new NumberRangeFilter(key, props);
+}
+exports.numberRangeFilter = numberRangeFilter;
+class NumberRangeFilter extends BaseFilter_1.BaseFilter {
+    render(value, setValue, tid, inModal, vertical) {
+        var _a, _b;
+        const { label, numberFieldType } = this.props;
+        const min = (_a = value === null || value === void 0 ? void 0 : value.min) !== null && _a !== void 0 ? _a : undefined;
+        const max = (_b = value === null || value === void 0 ? void 0 : value.max) !== null && _b !== void 0 ? _b : undefined;
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [vertical && ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, tid, { children: [(0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }, void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.pb1.$ }, { children: (0, jsx_runtime_1.jsx)(NumberField_1.NumberField, Object.assign({ inlineLabel: true, clearable: true, label: "Min", value: min, type: numberFieldType, onChange: (minVal) => {
+                                    const maxValue = max ? { max } : {};
+                                    setValue(minVal || max ? { min: minVal, ...maxValue } : undefined);
+                                } }, tid[`${(0, defaultTestId_1.defaultTestId)(label)}_min_vertical`]), void 0) }), void 0), (0, jsx_runtime_1.jsx)(NumberField_1.NumberField, Object.assign({ inlineLabel: true, clearable: true, label: "Max", value: max, type: numberFieldType, onChange: (maxVal) => {
+                                const minValue = min ? { min } : {};
+                                setValue(maxVal || min ? { max: maxVal, ...minValue } : undefined);
+                            } }, tid[`${(0, defaultTestId_1.defaultTestId)(label)}_max_vertical`]), void 0)] }), void 0)), !vertical && ((0, jsx_runtime_1.jsxs)(CompoundField_1.CompoundField, Object.assign({}, tid, { children: [(0, jsx_runtime_1.jsx)(NumberField_1.NumberField, Object.assign({ compact: true, sizeToContent: !inModal, inlineLabel: true, clearable: true, 
+                            // When in horizontal view, we combine the filter label with the min / max labels as all filter labels are displayed inline
+                            label: !inModal ? `${label} Min` : "Min", value: min, type: numberFieldType, onChange: (minVal) => {
+                                const maxValue = max ? { max } : {};
+                                setValue(minVal || max ? { min: minVal, ...maxValue } : undefined);
+                            } }, tid[`${(0, defaultTestId_1.defaultTestId)(label)}_min`]), void 0), (0, jsx_runtime_1.jsx)(NumberField_1.NumberField, Object.assign({ compact: true, sizeToContent: !inModal, inlineLabel: true, clearable: true, label: !inModal ? `${label} Max` : "Max", value: max, type: numberFieldType, onChange: (maxVal) => {
+                                const minValue = min ? { min } : {};
+                                setValue(maxVal || min ? { max: maxVal, ...minValue } : undefined);
+                            } }, tid[`${(0, defaultTestId_1.defaultTestId)(label)}_max`]), void 0)] }), void 0))] }, void 0));
+    }
+}

package/dist/components/Filters/index.d.ts

@@ -2,6 +2,7 @@ export { dateFilter } from "./DateFilter";
 export type { DateFilterValue } from "./DateFilter";
 export { dateRangeFilter } from "./DateRangeFilter";
 export type { DateRangeFilterValue } from "./DateRangeFilter";
+export { numberRangeFilter } from "./NumberRangeFilter";
 export { multiFilter } from "./MultiFilter";
 export { singleFilter } from "./SingleFilter";
 export { booleanFilter } from "./BooleanFilter";

package/dist/components/Filters/index.js

@@ -10,11 +10,13 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toggleFilter = exports.booleanFilter = exports.singleFilter = exports.multiFilter = exports.dateRangeFilter = exports.dateFilter = void 0;
+exports.toggleFilter = exports.booleanFilter = exports.singleFilter = exports.multiFilter = exports.numberRangeFilter = exports.dateRangeFilter = exports.dateFilter = void 0;
 var DateFilter_1 = require("./DateFilter");
 Object.defineProperty(exports, "dateFilter", { enumerable: true, get: function () { return DateFilter_1.dateFilter; } });
 var DateRangeFilter_1 = require("./DateRangeFilter");
 Object.defineProperty(exports, "dateRangeFilter", { enumerable: true, get: function () { return DateRangeFilter_1.dateRangeFilter; } });
+var NumberRangeFilter_1 = require("./NumberRangeFilter");
+Object.defineProperty(exports, "numberRangeFilter", { enumerable: true, get: function () { return NumberRangeFilter_1.numberRangeFilter; } });
 var MultiFilter_1 = require("./MultiFilter");
 Object.defineProperty(exports, "multiFilter", { enumerable: true, get: function () { return MultiFilter_1.multiFilter; } });
 var SingleFilter_1 = require("./SingleFilter");

package/dist/components/Filters/testDomain.d.ts

@@ -1,6 +1,7 @@
 import { DateFilterValue } from "./DateFilter";
 import { DateRangeFilterValue } from "./DateRangeFilter";
 import { FilterDefs } from "./types";
+import { NumberRangeFilterValue } from "./NumberRangeFilter";
 export declare enum Stage {
     StageOne = "ONE",
     StageTwo = "TWO"
@@ -39,6 +40,7 @@ export declare type ProjectFilter = {
     doNotUse?: boolean | null;
     date?: DateFilterValue<string>;
     dateRange?: DateRangeFilterValue<string>;
+    numberRange?: NumberRangeFilterValue;
 };
 export declare type StageFilter = NonNullable<FilterDefs<ProjectFilter>["stage"]>;
 export declare type StageSingleFilter = NonNullable<FilterDefs<ProjectFilter>["stageSingle"]>;

package/dist/inputs/NumberField.d.ts

@@ -33,6 +33,8 @@ export interface NumberFieldProps {
     useGrouping?: boolean;
     hideErrorMessage?: boolean;
     borderless?: boolean;
+    inlineLabel?: boolean;
+    sizeToContent?: 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;

package/dist/inputs/NumberField.js

@@ -12,10 +12,11 @@ const Css_1 = require("../Css");
 const utils_1 = require("../utils");
 const TextFieldBase_1 = require("./TextFieldBase");
 function NumberField(props) {
+    var _a;
     // 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, ...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, ...otherProps } = props;
     const isDisabled = !!disabled;
     const isReadOnly = !!readOnly;
     const factor = type === "percent" || type === "cents" ? 100 : type === "basisPoints" ? 10000 : 1;
@@ -85,7 +86,9 @@ function NumberField(props) {
     if (readOnly && !inputRef.current) {
         inputRef.current = document.createElement("input");
     }
-    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({ xss: { ...alignment, ...xss }, groupProps: groupProps, labelProps: labelProps, label: label, required: required, inputProps: inputProps, 
+    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({ xss: { ...alignment, ...xss }, groupProps: groupProps, labelProps: labelProps, label: label, required: required, inputProps: (0, react_aria_1.mergeProps)(inputProps, {
+            size: sizeToContent ? String((_a = inputProps.value) !== null && _a !== void 0 ? _a : "").length || 1 : undefined,
+        }), 
         // This is called on each DOM change, to push the latest value into the field
         onChange: (rawInputValue) => {
             const parsedValue = numberParser.parse(rawInputValue || "");

package/package.json

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