@homebound/beam 2.230.2 → 2.231.1

package/dist/components/Button.d.ts

@@ -3,7 +3,7 @@ import { ButtonHTMLAttributes, ReactNode, RefObject } from "react";
 import { IconProps } from "./";
 import { BeamButtonProps, BeamFocusableProps } from "../interfaces";
 export interface ButtonProps extends BeamButtonProps, BeamFocusableProps {
-    label: string;
+    label: ReactNode;
     variant?: ButtonVariant;
     size?: ButtonSize;
     icon?: IconProps["icon"] | null;

package/dist/components/Button.js

@@ -9,6 +9,7 @@ const Css_1 = require("../Css");
 const utils_1 = require("../utils");
 const getInteractiveElement_1 = require("../utils/getInteractiveElement");
 const useTestIds_1 = require("../utils/useTestIds");
+const OverlayTrigger_1 = require("./internal/OverlayTrigger");
 function Button(props) {
     const { onClick: onPress, disabled, endAdornment, menuTriggerProps, tooltip, openInNew, download, contrast = false, forceFocusStyles = false, labelInFlight, ...otherProps } = props;
     const asLink = typeof onPress === "string";
@@ -20,7 +21,7 @@ function Button(props) {
     // Default the icon based on other properties.
     icon = download ? "download" : showExternalLinkIcon ? "linkExternal" : undefined, variant = "primary", size = "sm", buttonRef, } = ariaProps;
     const ref = buttonRef || (0, react_1.useRef)(null);
-    const tid = (0, useTestIds_1.useTestIds)(props, label);
+    const tid = (0, useTestIds_1.useTestIds)(props, (0, OverlayTrigger_1.labelOr)(ariaProps, "button"));
     const { buttonProps, isPressed } = (0, react_aria_1.useButton)({
         ...ariaProps,
         onPress: asLink

package/dist/components/ButtonDatePicker.js

@@ -15,7 +15,11 @@ function ButtonDatePicker(props) {
     const state = (0, react_stately_1.useMenuTriggerState)({ isOpen: defaultOpen });
     const buttonRef = (0, react_1.useRef)(null);
     const { menuTriggerProps, menuProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
-    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? (0, defaultTestId_1.defaultTestId)(trigger.label) : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
+    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger)
+        ? (0, defaultTestId_1.defaultTestId)((0, OverlayTrigger_1.labelOr)(trigger, "buttonDatePicker"))
+        : (0, OverlayTrigger_1.isIconButton)(trigger)
+            ? trigger.icon
+            : trigger.name);
     return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, { ...props, menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef, ...tid, children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, { overlayProps: menuProps, children: (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { ...datePickerProps, onSelect: (d) => {
                     onSelect(d);
                     state.close();

package/dist/components/ButtonMenu.js

@@ -13,7 +13,7 @@ function ButtonMenu(props) {
     const state = (0, react_stately_1.useMenuTriggerState)({ isOpen: defaultOpen });
     const buttonRef = (0, react_1.useRef)(null);
     const { menuTriggerProps, menuProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
-    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? trigger.label : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
+    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? (0, OverlayTrigger_1.labelOr)(trigger, "buttonMenu") : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
     return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, { ...props, menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef, ...tid, children: (0, jsx_runtime_1.jsx)(Menu_1.Menu, { ariaMenuProps: menuProps, onClose: () => state.close(), items: items, persistentItems: persistentItems, searchable: searchable, ...tid }) }));
 }
 exports.ButtonMenu = ButtonMenu;

package/dist/components/ButtonModal.js

@@ -13,7 +13,7 @@ function ButtonModal(props) {
     const state = (0, react_stately_1.useMenuTriggerState)({ isOpen: storybookDefaultOpen });
     const buttonRef = (0, react_1.useRef)(null);
     const { menuTriggerProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
-    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? trigger.label : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
+    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? (0, OverlayTrigger_1.labelOr)(trigger, "buttonModal") : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
     return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, { ...props, menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef, ...tid, children: (0, jsx_runtime_1.jsx)(ContextualModal_1.ContextualModal, { content: content, title: title, close: state.close }) }));
 }
 exports.ButtonModal = ButtonModal;

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

@@ -4,6 +4,7 @@ export type NumberRangeFilterProps<DV extends NumberRangeFilterValue> = {
     label: string;
     numberFieldType?: NumberFieldType;
     defaultValue?: DV;
+    numberFormatOptions?: Intl.NumberFormatOptions;
 };
 export type NumberRangeFilterValue = {
     min: number;

package/dist/components/Filters/NumberRangeFilter.js

@@ -15,21 +15,21 @@ exports.numberRangeFilter = numberRangeFilter;
 class NumberRangeFilter extends BaseFilter_1.BaseFilter {
     render(value, setValue, tid, inModal, vertical) {
         var _a, _b;
-        const { label, numberFieldType } = this.props;
+        const { label, numberFieldType, numberFormatOptions } = 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", { ...tid, children: [(0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.pb1.$, children: (0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { labelStyle: "inline", clearable: true, label: "Min", value: min, type: numberFieldType, onChange: (minVal) => {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [vertical && ((0, jsx_runtime_1.jsxs)("div", { ...tid, children: [(0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.pb1.$, children: (0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { labelStyle: "inline", clearable: true, label: "Min", value: min, type: numberFieldType, numberFormatOptions: numberFormatOptions, onChange: (minVal) => {
                                     const maxValue = max ? { max } : {};
                                     setValue(minVal || max ? { min: minVal, ...maxValue } : undefined);
-                                }, ...tid[`${(0, defaultTestId_1.defaultTestId)(label)}_min_vertical`] }) }), (0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { labelStyle: "inline", clearable: true, label: "Max", value: max, type: numberFieldType, onChange: (maxVal) => {
+                                }, ...tid[`${(0, defaultTestId_1.defaultTestId)(label)}_min_vertical`] }) }), (0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { labelStyle: "inline", clearable: true, label: "Max", value: max, type: numberFieldType, numberFormatOptions: numberFormatOptions, onChange: (maxVal) => {
                                 const minValue = min ? { min } : {};
                                 setValue(maxVal || min ? { max: maxVal, ...minValue } : undefined);
                             }, ...tid[`${(0, defaultTestId_1.defaultTestId)(label)}_max_vertical`] })] })), !vertical && ((0, jsx_runtime_1.jsxs)(CompoundField_1.CompoundField, { ...tid, children: [(0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { compact: true, sizeToContent: !inModal, labelStyle: "inline", 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) => {
+                            label: !inModal ? `${label} Min` : "Min", value: min, type: numberFieldType, numberFormatOptions: numberFormatOptions, onChange: (minVal) => {
                                 const maxValue = max ? { max } : {};
                                 setValue(minVal || max ? { min: minVal, ...maxValue } : undefined);
-                            }, ...tid[`${(0, defaultTestId_1.defaultTestId)(label)}_min`] }), (0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { compact: true, sizeToContent: !inModal, labelStyle: "inline", clearable: true, label: !inModal ? `${label} Max` : "Max", value: max, type: numberFieldType, onChange: (maxVal) => {
+                            }, ...tid[`${(0, defaultTestId_1.defaultTestId)(label)}_min`] }), (0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { compact: true, sizeToContent: !inModal, labelStyle: "inline", clearable: true, label: !inModal ? `${label} Max` : "Max", value: max, type: numberFieldType, numberFormatOptions: numberFormatOptions, onChange: (maxVal) => {
                                 const minValue = min ? { min } : {};
                                 setValue(maxVal || min ? { max: maxVal, ...minValue } : undefined);
                             }, ...tid[`${(0, defaultTestId_1.defaultTestId)(label)}_max`] })] }))] }));

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

@@ -2,8 +2,8 @@ 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 { numberRangeFilter } from "./NumberRangeFilter";
 export { singleFilter } from "./SingleFilter";
 export { booleanFilter } from "./BooleanFilter";
 export { checkboxFilter } from "./CheckboxFilter";

package/dist/components/Filters/index.js

@@ -14,15 +14,15 @@ 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.checkboxFilter = exports.booleanFilter = exports.singleFilter = exports.multiFilter = exports.numberRangeFilter = exports.dateRangeFilter = exports.dateFilter = void 0;
+exports.toggleFilter = exports.checkboxFilter = exports.booleanFilter = exports.singleFilter = exports.numberRangeFilter = exports.multiFilter = 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 NumberRangeFilter_1 = require("./NumberRangeFilter");
+Object.defineProperty(exports, "numberRangeFilter", { enumerable: true, get: function () { return NumberRangeFilter_1.numberRangeFilter; } });
 var SingleFilter_1 = require("./SingleFilter");
 Object.defineProperty(exports, "singleFilter", { enumerable: true, get: function () { return SingleFilter_1.singleFilter; } });
 var BooleanFilter_1 = require("./BooleanFilter");

package/dist/components/SuperDrawer/utils.js

@@ -6,4 +6,3 @@ var SuperDrawerWidth;
     SuperDrawerWidth[SuperDrawerWidth["Small"] = 560] = "Small";
     SuperDrawerWidth[SuperDrawerWidth["Normal"] = 1040] = "Normal";
 })(SuperDrawerWidth = exports.SuperDrawerWidth || (exports.SuperDrawerWidth = {}));
-;

package/dist/components/Table/components/EditColumnsButton.js

@@ -16,7 +16,7 @@ function EditColumnsButton(props) {
     const state = (0, react_stately_1.useMenuTriggerState)({ isOpen: defaultOpen });
     const buttonRef = (0, react_1.useRef)(null);
     const { menuTriggerProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
-    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? trigger.label : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
+    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? (0, OverlayTrigger_1.labelOr)(trigger, "editColumnsButton") : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
     const { options } = (0, react_1.useMemo)(() => {
         return columns.reduce((acc, column) => {
             // Only include options that can be hidden and have the `name` property defined.

package/dist/components/internal/DatePicker/DatePicker.css

@@ -2,7 +2,7 @@
   /* Modified by Beam (40 -> 32) */
   --rdp-cell-size: 32px;
   /* Modified by Beam (#0000ff -> LightBlue700) */
-  --rdp-accent-color: rgba(3,105,161,1);
+  --rdp-accent-color: rgba(3, 105, 161, 1);
   --rdp-background-color: #e7edff;
   /* Switch to dark colors for dark themes */
   --rdp-accent-color-dark: #3003e1;
@@ -11,7 +11,7 @@
   --rdp-outline: 2px solid var(--rdp-accent-color);
   /* Outline border for focused and selected elements */
   /* Modified by Beam (rgba(0, 0, 0, 0.75) -> LightBlue700) */
-  --rdp-outline-selected: 2px solid rgba(3,105,161,1);
+  --rdp-outline-selected: 2px solid rgba(3, 105, 161, 1);
 }
 
 /* Added in By Beam */
@@ -64,12 +64,12 @@
   border: 2px solid transparent;
 }
 
-.rdp-button[aria-disabled='true'] {
+.rdp-button[aria-disabled="true"] {
   opacity: 0.25;
   pointer-events: none;
 }
 
-.rdp-button:not([aria-disabled='true']) {
+.rdp-button:not([aria-disabled="true"]) {
   cursor: pointer;
 }
 
@@ -80,7 +80,7 @@
   background-color: var(--rdp-background-color);
 }
 
-.rdp-button:hover:not([aria-disabled='true']) {
+.rdp-button:hover:not([aria-disabled="true"]) {
   background-color: var(--rdp-background-color);
 }
 
@@ -279,34 +279,34 @@
   font-weight: bold;
 }
 
-.rdp-day_selected:not([aria-disabled='true']),
-.rdp-day_selected:focus:not([aria-disabled='true']),
-.rdp-day_selected:active:not([aria-disabled='true']),
-.rdp-day_selected:hover:not([aria-disabled='true']) {
+.rdp-day_selected:not([aria-disabled="true"]),
+.rdp-day_selected:focus:not([aria-disabled="true"]),
+.rdp-day_selected:active:not([aria-disabled="true"]),
+.rdp-day_selected:hover:not([aria-disabled="true"]) {
   color: white;
   background-color: var(--rdp-accent-color);
 }
 
-.rdp-day_selected:focus:not([aria-disabled='true']) {
+.rdp-day_selected:focus:not([aria-disabled="true"]) {
   border: var(--rdp-outline-selected);
 }
 
-.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {
+.rdp:not([dir="rtl"]) .rdp-day_range_start:not(.rdp-day_range_end) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {
+.rdp:not([dir="rtl"]) .rdp-day_range_end:not(.rdp-day_range_start) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {
+.rdp[dir="rtl"] .rdp-day_range_start:not(.rdp-day_range_end) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {
+.rdp[dir="rtl"] .rdp-day_range_end:not(.rdp-day_range_start) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }

package/dist/components/internal/OverlayTrigger.d.ts

@@ -34,4 +34,7 @@ export interface OverlayTriggerProps {
 export declare function OverlayTrigger(props: OverlayTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function isTextButton(trigger: TextButtonTriggerProps | IconButtonTriggerProps | AvatarButtonTriggerProps): trigger is TextButtonTriggerProps;
 export declare function isIconButton(trigger: TextButtonTriggerProps | IconButtonTriggerProps | AvatarButtonTriggerProps): trigger is IconButtonTriggerProps;
+export declare function labelOr(trigger: {
+    label: unknown;
+}, fallback: string): string;
 export {};

package/dist/components/internal/OverlayTrigger.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isIconButton = exports.isTextButton = exports.OverlayTrigger = void 0;
+exports.labelOr = exports.isIconButton = exports.isTextButton = exports.OverlayTrigger = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
@@ -24,7 +24,11 @@ function OverlayTrigger(props) {
         placement: (placement ? `bottom ${placement}` : "bottom left"),
         offset: showActiveBorder ? 4 : undefined,
     });
-    const tid = (0, utils_1.useTestIds)(props, isTextButton(trigger) ? (0, defaultTestId_1.defaultTestId)(trigger.label) : isIconButton(trigger) ? trigger.icon : trigger.name);
+    const tid = (0, utils_1.useTestIds)(props, isTextButton(trigger)
+        ? (0, defaultTestId_1.defaultTestId)(labelOr(trigger, "overlayTrigger"))
+        : isIconButton(trigger)
+            ? trigger.icon
+            : trigger.name);
     return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.relative.dib.$, children: [isTextButton(trigger) ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant ? variant : "secondary", ...trigger, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, endAdornment: !hideEndAdornment ? (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }) : null, disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen, ...tid })) : isIconButton(trigger) ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { ...trigger, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, ...tid, disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen })) : ((0, jsx_runtime_1.jsx)(AvatarButton_1.AvatarButton, { ...trigger, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, ...tid, disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen })), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: buttonRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, children: children }))] }));
 }
 exports.OverlayTrigger = OverlayTrigger;
@@ -36,3 +40,7 @@ function isIconButton(trigger) {
     return trigger && typeof trigger === "object" && "icon" in trigger;
 }
 exports.isIconButton = isIconButton;
+function labelOr(trigger, fallback) {
+    return typeof trigger.label === "string" ? trigger.label : fallback;
+}
+exports.labelOr = labelOr;

package/dist/inputs/index.d.ts

@@ -13,6 +13,6 @@ export * from "./Switch";
 export * from "./TextAreaField";
 export * from "./TextField";
 export type { TextFieldApi } from "./TextField";
+export * from "./ToggleButton";
 export * from "./ToggleChipGroup";
 export type { Value } from "./Value";
-export * from "./ToggleButton";

package/dist/inputs/index.js

@@ -28,5 +28,5 @@ __exportStar(require("./SelectField"), exports);
 __exportStar(require("./Switch"), exports);
 __exportStar(require("./TextAreaField"), exports);
 __exportStar(require("./TextField"), exports);
-__exportStar(require("./ToggleChipGroup"), exports);
 __exportStar(require("./ToggleButton"), exports);
+__exportStar(require("./ToggleChipGroup"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.230.2",
+  "version": "2.231.1",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -115,8 +115,8 @@
     "jest-watch-typeahead": "^0.6.5",
     "mobx": "^6.3.2",
     "mobx-react": "^7.2.0",
-    "prettier": "^2.2.1",
-    "prettier-plugin-organize-imports": "^1.1.1",
+    "prettier": "^2.8.1",
+    "prettier-plugin-organize-imports": "^3.2.1",
     "react": "^16.14.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^16.14.0",