@homebound/beam 2.413.0 → 2.414.0-alpha.2

package/dist/index.cjs

@@ -7065,7 +7065,7 @@ function Button(props) {
     // Default the icon based on other properties.
     icon = download ? "download" : showExternalLinkIcon ? "linkExternal" : void 0,
     variant = "primary",
-    size = "sm",
+    size = "md",
     buttonRef
   } = ariaProps;
   const ref = useGetRef(buttonRef);
@@ -7203,7 +7203,7 @@ var variantStyles = (contrast) => ({
 });
 var sizeStyles = {
   sm: Css.hPx(32).pxPx(12).$,
-  md: Css.hPx(40).px1.$,
+  md: Css.hPx(40).px2.$,
   lg: Css.hPx(48).px3.$
 };
 var iconStyles = {
@@ -8635,10 +8635,10 @@ function RowImpl(props) {
     const maybeSticky = (isGridCellContent(maybeContent) && maybeContent.sticky || column2.sticky) ?? void 0;
     const maybeStickyColumnStyles = maybeSticky && columnSizes ? {
       ...Css.sticky.z(zIndices.stickyColumns).bgWhite.$,
-      ...maybeSticky === "left" ? Css.left(columnIndex === 0 ? 0 : `calc(${columnSizes.slice(0, columnIndex).join(" + ")})`).$ : {},
-      ...maybeSticky === "right" ? Css.right(
-        columnIndex + 1 === columnSizes.length ? 0 : `calc(${columnSizes.slice(columnIndex + 1 - columnSizes.length).join(" + ")})`
-      ).$ : {}
+      // For flex layouts, all sticky columns should have left/right: 0
+      // The flex layout handles their adjacency based on their widths
+      ...maybeSticky === "left" ? Css.left(0).$ : {},
+      ...maybeSticky === "right" ? Css.right(0).$ : {}
     } : {};
     minStickyLeftOffset += maybeSticky === "left" ? parseInt(columnSizes[columnIndex].replace("px", ""), 10) : 0;
     const cellId = `${row.kind}_${row.id}_${column2.id}`;
@@ -8834,7 +8834,7 @@ function TextFieldBase(props) {
   const fieldStyles = {
     container: Css.df.fdc.w100.maxw(fieldMaxWidth).relative.if(labelStyle === "left").maxw100.fdr.gap2.jcsb.aic.$,
     inputWrapper: {
-      ...Css[typeScale].df.aic.br4.pxPx(textFieldBasePadding).w100.bgColor(bgColor).gray900.if(contrast && !inputStylePalette).white.if(labelStyle === "left").w(labelLeftFieldWidth).$,
+      ...Css[typeScale].df.aic.br8.pxPx(textFieldBasePadding).w100.bgColor(bgColor).gray900.if(contrast && !inputStylePalette).white.if(labelStyle === "left").w(labelLeftFieldWidth).$,
       // When borderless then perceived vertical alignments are misaligned. As there is no longer a border, then the field looks oddly indented.
       // This typically happens in tables when a column has a mix of static text (i.e. "roll up" rows and table headers) and input fields.
       // To remedy this perceived misalignment then we increase the width by the horizontal padding applied (16px), and set a negative margin left margin to re-center the field.
@@ -8858,16 +8858,14 @@ function TextFieldBase(props) {
       ...labelStyle === "hidden" && Css.mhPx(fieldHeight - maybeSmaller).if(compact).mhPx(compactFieldHeight - maybeSmaller).$
     },
     input: {
-      ...Css.w100.mw0.outline0.fg1.bgColor(bgColor).$,
+      ...Css.w100.mw0.outline0.fg1.bgTransparent.$,
       // Not using Truss's inline `if` statement here because `addIn` properties do not respect the if statement.
       ...contrast && !inputStylePalette && Css.addIn("&::selection", Css.bgGray800.$).$,
-      // Make the background transparent when highlighting the field on hover
-      ...borderOnHover && Css.bgTransparent.$,
       // For "multiline" fields we add top and bottom padding of 7px for compact, or 11px for non-compact, to properly match the height of the single line fields
       ...multiline ? Css.br4.pyPx(compact ? 7 : textFieldBaseMultilineTopPadding).add("resize", "none").$ : Css.truncate.$
     },
     hover: Css.bgColor(hoverBgColor).if(contrast).bcGray600.$,
-    focus: Css.bcBlue700.if(contrast).bcBlue500.if(borderOnHover).bgColor(hoverBgColor).bcBlue500.$,
+    focus: Css.bcBlue700.bgColor(hoverBgColor).if(contrast).bcBlue500.if(borderOnHover).bcBlue500.$,
     disabled: visuallyDisabled ? Css.cursorNotAllowed.gray600.bgColor(disabledBgColor).if(contrast).gray500.$ : Css.cursorNotAllowed.$,
     error: Css.bcRed600.if(contrast).bcRed400.$
   };
@@ -14605,7 +14603,7 @@ var variantStyles2 = {
 
 // src/components/BeamContext.tsx
 var import_react103 = require("react");
-var import_react_aria46 = require("react-aria");
+var import_react_aria45 = require("react-aria");
 
 // src/components/Modal/Modal.tsx
 var import_utils72 = require("@react-aria/utils");
@@ -16525,7 +16523,6 @@ function isSelectionButtonMenuProps(props) {
 
 // src/components/Filters/FilterDropdownMenu.tsx
 var import_react97 = require("react");
-var import_react_aria45 = require("react-aria");
 
 // src/components/CountBadge.tsx
 var import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
@@ -16580,7 +16577,6 @@ var DateFilter = class extends BaseFilter {
         /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
           SelectField,
           {
-            compact: true,
             sizeToContent: true,
             options: [
               // Always show the 'Any' option
@@ -16603,7 +16599,6 @@ var DateFilter = class extends BaseFilter {
         /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
           DateField,
           {
-            compact: true,
             labelStyle: "inline",
             value: value?.value ? new Date(value.value) : /* @__PURE__ */ new Date(),
             label: "Date",
@@ -16630,7 +16625,6 @@ var DateRangeFilter = class extends BaseFilter {
       /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
         DateRangeField,
         {
-          compact: true,
           labelStyle: "inline",
           isRangeFilterField: true,
           placeholder: placeholderText,
@@ -16684,7 +16678,6 @@ var MultiFilter = class extends BaseFilter {
       MultiSelectField,
       {
         ...props,
-        compact: !vertical,
         label: this.label,
         values: value || [],
         labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above",
@@ -16749,7 +16742,6 @@ var NumberRangeFilter = class extends BaseFilter {
         /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
           NumberField,
           {
-            compact: true,
             sizeToContent: !inModal,
             labelStyle: "inline",
             clearable: true,
@@ -16767,7 +16759,6 @@ var NumberRangeFilter = class extends BaseFilter {
         /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
           NumberField,
           {
-            compact: true,
             sizeToContent: !inModal,
             labelStyle: "inline",
             clearable: true,
@@ -16812,7 +16803,6 @@ var SingleFilter = class extends BaseFilter {
         options,
         getOptionValue: (o) => o === allOption ? void 0 : getOptionValue(o),
         getOptionLabel: (o) => o === allOption ? nothingSelectedText ?? "All" : getOptionLabel(o),
-        compact: !vertical,
         value,
         label: this.label,
         labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above",
@@ -16839,7 +16829,6 @@ var TreeFilter = class extends BaseFilter {
         ...props,
         label: this.label,
         values: value,
-        compact: !vertical,
         labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above",
         sizeToContent: !inModal && !vertical,
         onSelect: (options) => {
@@ -16865,7 +16854,6 @@ var BooleanFilter = class extends BaseFilter {
       SelectField,
       {
         ...props,
-        compact: !vertical,
         label: this.label,
         value: String(value),
         labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above",
@@ -17015,7 +17003,6 @@ function Filters(props) {
     SelectField,
     {
       label: "Group by",
-      compact: !vertical,
       labelStyle: !vertical ? "inline" : "above",
       sizeToContent: !vertical,
       options: groupBy.options,
@@ -17039,6 +17026,7 @@ function Filters(props) {
           Button,
           {
             label: "More Filters",
+            size: "md",
             endAdornment: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(CountBadge, { count: numModalFilters, hideIfZero: true }),
             variant: "secondary",
             onClick: () => openModal({
@@ -17048,7 +17036,7 @@ function Filters(props) {
             ...testId.moreFiltersBtn
           }
         ),
-        Object.keys(filter).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn }) })
+        Object.keys(filter).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Button, { label: "Clear", size: "md", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn }) })
       ]
     }
   );
@@ -17102,20 +17090,6 @@ function FilterDropdownMenu(props) {
   const { filter, onChange, filterDefs, groupBy } = props;
   const testId = useTestIds(props, filterTestIdPrefix);
   const [isOpen, setIsOpen] = (0, import_react97.useState)(false);
-  const buttonRef = (0, import_react97.useRef)(null);
-  const filterContentRef = (0, import_react97.useRef)(null);
-  const { overlayProps } = (0, import_react_aria45.useOverlay)(
-    {
-      isOpen,
-      onClose: () => setIsOpen(false),
-      isDismissable: true,
-      shouldCloseOnInteractOutside: (element) => {
-        if (buttonRef.current?.contains(element)) return false;
-        return true;
-      }
-    },
-    filterContentRef
-  );
   const activeFilterCount = (0, import_react97.useMemo)(() => getActiveFilterCount(filter), [filter]);
   const filterImpls = (0, import_react97.useMemo)(() => buildFilterImpls(filterDefs), [filterDefs]);
   const renderFilters = () => {
@@ -17125,7 +17099,7 @@ function FilterDropdownMenu(props) {
     return [...nonCheckbox, ...checkbox].map(([key, f]) => /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("div", { children: f.render(filter[key], (value) => onChange(updateFilter(filter, key, value)), testId, false, false) }, key));
   };
   return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_jsx_runtime140.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("div", { ref: buttonRef, children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
       Button,
       {
         label: "Filter",
@@ -17139,13 +17113,12 @@ function FilterDropdownMenu(props) {
         onClick: () => setIsOpen(!isOpen),
         ...testId.button
       }
-    ) }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", { ref: filterContentRef, ...overlayProps, css: Css.df.aic.fww.gap1.order(1).$, children: [
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", { css: Css.df.aic.fww.gap1.w100.$, children: [
       groupBy && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
         SelectField,
         {
           label: "Group by",
-          compact: true,
           labelStyle: "inline",
           sizeToContent: true,
           options: groupBy.options,
@@ -17156,7 +17129,7 @@ function FilterDropdownMenu(props) {
         }
       ),
       renderFilters(),
-      activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn })
+      activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Button, { label: "Clear", size: "md", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn })
     ] }),
     !isOpen && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
       FilterChips,
@@ -17208,7 +17181,7 @@ function FilterChips({
   if (chips.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", { css: Css.df.gap1.fww.aic.order(1).$, children: [
     chips,
-    /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: onClear, ...testId.clearBtn })
+    /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Button, { label: "Clear", size: "md", variant: "tertiary", onClick: onClear, ...testId.clearBtn })
   ] });
 }
 function buildFilterImpls(filterDefs) {
@@ -17759,7 +17732,7 @@ function BeamProvider({ children, ...presentationProps }) {
     };
   }, [modalBodyDiv, modalFooterDiv, modalHeaderDiv, sdHeaderDiv]);
   return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(BeamContext.Provider, { value: { ...context }, children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(PresentationProvider, { ...presentationProps, children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(RightPaneProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(AutoSaveStatusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(SnackbarProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)(ToastProvider, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)(import_react_aria46.OverlayProvider, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)(import_react_aria45.OverlayProvider, { children: [
       children,
       modalRef.current && /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(Modal, { ...modalRef.current })
     ] }),
@@ -17785,14 +17758,14 @@ function useBeamContext() {
 
 // src/components/ButtonDatePicker.tsx
 var import_react104 = require("react");
-var import_react_aria47 = require("react-aria");
+var import_react_aria46 = require("react-aria");
 var import_react_stately18 = require("react-stately");
 var import_jsx_runtime151 = require("@emotion/react/jsx-runtime");
 function ButtonDatePicker(props) {
   const { defaultOpen, disabled, trigger, onSelect, ...datePickerProps } = props;
   const state = (0, import_react_stately18.useMenuTriggerState)({ isOpen: defaultOpen });
   const buttonRef = (0, import_react104.useRef)(null);
-  const { menuTriggerProps, menuProps } = (0, import_react_aria47.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
+  const { menuTriggerProps, menuProps } = (0, import_react_aria46.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
   const tid = useTestIds(
     props,
     isTextButton(trigger) ? defaultTestId(labelOr(trigger, "buttonDatePicker")) : isNavLinkButton(trigger) ? defaultTestId(trigger.navLabel) : isIconButton(trigger) ? trigger.icon : trigger.name
@@ -17812,7 +17785,7 @@ function ButtonDatePicker(props) {
 
 // src/components/ButtonGroup.tsx
 var import_react105 = require("react");
-var import_react_aria48 = require("react-aria");
+var import_react_aria47 = require("react-aria");
 var import_jsx_runtime152 = (
   // Disable the button if the ButtonGroup is disabled or if the current button is disabled.
   require("@emotion/react/jsx-runtime")
@@ -17829,9 +17802,9 @@ function GroupButton(props) {
   const { icon, iconInc, iconColor, text, active, onClick: onPress, disabled, size, tooltip, ...otherProps } = props;
   const ariaProps = { onPress, isDisabled: !!disabled, ...otherProps };
   const ref = (0, import_react105.useRef)(null);
-  const { buttonProps, isPressed } = (0, import_react_aria48.useButton)(ariaProps, ref);
-  const { isFocusVisible, focusProps } = (0, import_react_aria48.useFocusRing)();
-  const { hoverProps, isHovered } = (0, import_react_aria48.useHover)(ariaProps);
+  const { buttonProps, isPressed } = (0, import_react_aria47.useButton)(ariaProps, ref);
+  const { isFocusVisible, focusProps } = (0, import_react_aria47.useFocusRing)();
+  const { hoverProps, isHovered } = (0, import_react_aria47.useHover)(ariaProps);
   const tid = useTestIds(props);
   return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { css: getButtonStyles2(), children: maybeTooltip({
     title: resolveTooltip(disabled, tooltip),
@@ -17888,7 +17861,7 @@ var iconStyles2 = {
 
 // src/components/Card.tsx
 var import_react107 = require("react");
-var import_react_aria49 = require("react-aria");
+var import_react_aria48 = require("react-aria");
 
 // src/components/Tag.tsx
 var import_utils116 = require("@react-aria/utils");
@@ -17947,7 +17920,7 @@ function Card(props) {
     tag
   } = props;
   const tid = useTestIds(props, "card");
-  const { hoverProps, isHovered } = (0, import_react_aria49.useHover)({ isDisabled });
+  const { hoverProps, isHovered } = (0, import_react_aria48.useHover)({ isDisabled });
   const isList = type === "list";
   const imgHeight = isList ? 96 : bordered ? 224 : 256;
   const styles = (0, import_react107.useMemo)(
@@ -18222,12 +18195,12 @@ var gridCloneKey = "dndgrid-clone";
 var activeGridItemClass = "dndgrid-active";
 
 // src/components/DnDGrid/DnDGridItemHandle.tsx
-var import_react_aria50 = require("react-aria");
+var import_react_aria49 = require("react-aria");
 var import_jsx_runtime157 = require("@emotion/react/jsx-runtime");
 function DnDGridItemHandle(props) {
   const { dragHandleProps, icon = "move", compact = false, color } = props;
-  const { focusProps, isFocusVisible } = (0, import_react_aria50.useFocusRing)();
-  const { hoverProps, isHovered } = (0, import_react_aria50.useHover)({});
+  const { focusProps, isFocusVisible } = (0, import_react_aria49.useFocusRing)();
+  const { hoverProps, isHovered } = (0, import_react_aria49.useHover)({});
   const tid = useTestIds(props, "dragHandle");
   const iconButtonNormal2 = Css.hPx(28).wPx(28).br8.bw2.$;
   const iconButtonCompact2 = Css.hPx(18).wPx(18).br4.bw1.$;
@@ -18239,7 +18212,7 @@ function DnDGridItemHandle(props) {
         ...Css.cursor("grab").bcTransparent.bss.bgTransparent.outline0.dif.aic.jcc.transition.if(isFocusVisible).bcBlue700.$,
         ...isHovered && Css.bgGray200.$
       },
-      ...(0, import_react_aria50.mergeProps)(dragHandleProps, focusProps, hoverProps),
+      ...(0, import_react_aria49.mergeProps)(dragHandleProps, focusProps, hoverProps),
       ...tid,
       children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(Icon, { icon, inc: compact ? 2 : void 0, color })
     }
@@ -18553,7 +18526,7 @@ var snackbarId = 1;
 
 // src/components/Stepper.tsx
 var import_react116 = require("react");
-var import_react_aria51 = require("react-aria");
+var import_react_aria50 = require("react-aria");
 var import_jsx_runtime163 = require("@emotion/react/jsx-runtime");
 function Stepper(props) {
   const { steps, currentStep, onChange } = props;
@@ -18597,9 +18570,9 @@ function StepButton(props) {
   const { label, disabled, state, isCurrent, onClick } = props;
   const ariaProps = { onPress: onClick, isDisabled: disabled };
   const ref = (0, import_react116.useRef)(null);
-  const { buttonProps, isPressed } = (0, import_react_aria51.useButton)(ariaProps, ref);
-  const { isFocusVisible, focusProps } = (0, import_react_aria51.useFocusRing)();
-  const { hoverProps, isHovered } = (0, import_react_aria51.useHover)(ariaProps);
+  const { buttonProps, isPressed } = (0, import_react_aria50.useButton)(ariaProps, ref);
+  const { isFocusVisible, focusProps } = (0, import_react_aria50.useFocusRing)();
+  const { hoverProps, isHovered } = (0, import_react_aria50.useHover)(ariaProps);
   const focusRingStyles2 = state === "error" ? Css.bshDanger.$ : Css.bshFocus.$;
   const tid = useTestIds(props, "stepButton");
   return /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)(
@@ -18886,7 +18859,7 @@ var SuperDrawerContent = ({ children, actions }) => {
 // src/components/Tabs.tsx
 var import_change_case7 = require("change-case");
 var import_react118 = require("react");
-var import_react_aria52 = require("react-aria");
+var import_react_aria51 = require("react-aria");
 var import_react_router2 = require("react-router");
 var import_react_router_dom5 = require("react-router-dom");
 var import_jsx_runtime168 = require("@emotion/react/jsx-runtime");
@@ -18929,7 +18902,7 @@ function Tabs(props) {
   const selected = isRouteTabs(props) ? uniqueTabValue(
     props.tabs.find((t) => !!(0, import_react_router2.matchPath)(location.pathname, { path: t.path, exact: true })) || props.tabs[0]
   ) : props.selected;
-  const { isFocusVisible, focusProps } = (0, import_react_aria52.useFocusRing)();
+  const { isFocusVisible, focusProps } = (0, import_react_aria51.useFocusRing)();
   const tid = useTestIds(others, "tabs");
   const [active, setActive] = (0, import_react118.useState)(selected);
   const ref = (0, import_react118.useRef)(null);
@@ -18974,7 +18947,7 @@ function TabImpl(props) {
   const { tab, onClick, active, onKeyUp, onBlur, focusProps, isFocusVisible = false, ...others } = props;
   const { disabled = false, name: label, icon, endAdornment } = tab;
   const isDisabled = !!disabled;
-  const { hoverProps, isHovered } = (0, import_react_aria52.useHover)({ isDisabled });
+  const { hoverProps, isHovered } = (0, import_react_aria51.useHover)({ isDisabled });
   const { baseStyles: baseStyles5, activeStyles: activeStyles4, focusRingStyles: focusRingStyles2, hoverStyles: hoverStyles4, disabledStyles: disabledStyles4, activeHoverStyles } = (0, import_react118.useMemo)(
     () => getTabStyles(),
     []
@@ -18997,7 +18970,7 @@ function TabImpl(props) {
       ...isFocusVisible && active && focusRingStyles2
     }
   };
-  const interactiveProps = (0, import_react_aria52.mergeProps)(focusProps, hoverProps, {
+  const interactiveProps = (0, import_react_aria51.mergeProps)(focusProps, hoverProps, {
     onKeyUp,
     onBlur,
     ...isRouteTab(tab) ? {} : { onClick: () => onClick(tab.value) }