@homebound/beam 2.413.0 → 2.414.0-alpha.2

package/dist/index.js

@@ -6697,7 +6697,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);
@@ -6835,7 +6835,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 = {
@@ -8267,10 +8267,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}`;
@@ -8466,7 +8466,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.
@@ -8490,16 +8490,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.$
   };
@@ -14245,7 +14243,7 @@ var variantStyles2 = {
 };
 
 // src/components/BeamContext.tsx
-import { createContext as createContext6, useContext as useContext16, useMemo as useMemo38, useReducer, useRef as useRef47 } from "react";
+import { createContext as createContext6, useContext as useContext16, useMemo as useMemo38, useReducer, useRef as useRef46 } from "react";
 import { OverlayProvider } from "react-aria";
 
 // src/components/Modal/Modal.tsx
@@ -16165,8 +16163,7 @@ function isSelectionButtonMenuProps(props) {
 }
 
 // src/components/Filters/FilterDropdownMenu.tsx
-import { memo as memo2, useMemo as useMemo34, useRef as useRef46, useState as useState39 } from "react";
-import { useOverlay as useOverlay3 } from "react-aria";
+import { memo as memo2, useMemo as useMemo34, useState as useState39 } from "react";
 
 // src/components/CountBadge.tsx
 import { jsx as jsx127 } from "@emotion/react/jsx-runtime";
@@ -16221,7 +16218,6 @@ var DateFilter = class extends BaseFilter {
         /* @__PURE__ */ jsx128(
           SelectField,
           {
-            compact: true,
             sizeToContent: true,
             options: [
               // Always show the 'Any' option
@@ -16244,7 +16240,6 @@ var DateFilter = class extends BaseFilter {
         /* @__PURE__ */ jsx128(
           DateField,
           {
-            compact: true,
             labelStyle: "inline",
             value: value?.value ? new Date(value.value) : /* @__PURE__ */ new Date(),
             label: "Date",
@@ -16271,7 +16266,6 @@ var DateRangeFilter = class extends BaseFilter {
       /* @__PURE__ */ jsx129(
         DateRangeField,
         {
-          compact: true,
           labelStyle: "inline",
           isRangeFilterField: true,
           placeholder: placeholderText,
@@ -16325,7 +16319,6 @@ var MultiFilter = class extends BaseFilter {
       MultiSelectField,
       {
         ...props,
-        compact: !vertical,
         label: this.label,
         values: value || [],
         labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above",
@@ -16390,7 +16383,6 @@ var NumberRangeFilter = class extends BaseFilter {
         /* @__PURE__ */ jsx131(
           NumberField,
           {
-            compact: true,
             sizeToContent: !inModal,
             labelStyle: "inline",
             clearable: true,
@@ -16408,7 +16400,6 @@ var NumberRangeFilter = class extends BaseFilter {
         /* @__PURE__ */ jsx131(
           NumberField,
           {
-            compact: true,
             sizeToContent: !inModal,
             labelStyle: "inline",
             clearable: true,
@@ -16453,7 +16444,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",
@@ -16480,7 +16470,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) => {
@@ -16506,7 +16495,6 @@ var BooleanFilter = class extends BaseFilter {
       SelectField,
       {
         ...props,
-        compact: !vertical,
         label: this.label,
         value: String(value),
         labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above",
@@ -16656,7 +16644,6 @@ function Filters(props) {
     SelectField,
     {
       label: "Group by",
-      compact: !vertical,
       labelStyle: !vertical ? "inline" : "above",
       sizeToContent: !vertical,
       options: groupBy.options,
@@ -16680,6 +16667,7 @@ function Filters(props) {
           Button,
           {
             label: "More Filters",
+            size: "md",
             endAdornment: /* @__PURE__ */ jsx138(CountBadge, { count: numModalFilters, hideIfZero: true }),
             variant: "secondary",
             onClick: () => openModal({
@@ -16689,7 +16677,7 @@ function Filters(props) {
             ...testId.moreFiltersBtn
           }
         ),
-        Object.keys(filter).length > 0 && /* @__PURE__ */ jsx138("div", { children: /* @__PURE__ */ jsx138(Button, { label: "Clear", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn }) })
+        Object.keys(filter).length > 0 && /* @__PURE__ */ jsx138("div", { children: /* @__PURE__ */ jsx138(Button, { label: "Clear", size: "md", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn }) })
       ]
     }
   );
@@ -16743,20 +16731,6 @@ function FilterDropdownMenu(props) {
   const { filter, onChange, filterDefs, groupBy } = props;
   const testId = useTestIds(props, filterTestIdPrefix);
   const [isOpen, setIsOpen] = useState39(false);
-  const buttonRef = useRef46(null);
-  const filterContentRef = useRef46(null);
-  const { overlayProps } = useOverlay3(
-    {
-      isOpen,
-      onClose: () => setIsOpen(false),
-      isDismissable: true,
-      shouldCloseOnInteractOutside: (element) => {
-        if (buttonRef.current?.contains(element)) return false;
-        return true;
-      }
-    },
-    filterContentRef
-  );
   const activeFilterCount = useMemo34(() => getActiveFilterCount(filter), [filter]);
   const filterImpls = useMemo34(() => buildFilterImpls(filterDefs), [filterDefs]);
   const renderFilters = () => {
@@ -16766,7 +16740,7 @@ function FilterDropdownMenu(props) {
     return [...nonCheckbox, ...checkbox].map(([key, f]) => /* @__PURE__ */ jsx140("div", { children: f.render(filter[key], (value) => onChange(updateFilter(filter, key, value)), testId, false, false) }, key));
   };
   return /* @__PURE__ */ jsxs68(Fragment31, { children: [
-    /* @__PURE__ */ jsx140("div", { ref: buttonRef, children: /* @__PURE__ */ jsx140(
+    /* @__PURE__ */ jsx140(
       Button,
       {
         label: "Filter",
@@ -16780,13 +16754,12 @@ function FilterDropdownMenu(props) {
         onClick: () => setIsOpen(!isOpen),
         ...testId.button
       }
-    ) }),
-    isOpen && /* @__PURE__ */ jsxs68("div", { ref: filterContentRef, ...overlayProps, css: Css.df.aic.fww.gap1.order(1).$, children: [
+    ),
+    isOpen && /* @__PURE__ */ jsxs68("div", { css: Css.df.aic.fww.gap1.w100.$, children: [
       groupBy && /* @__PURE__ */ jsx140(
         SelectField,
         {
           label: "Group by",
-          compact: true,
           labelStyle: "inline",
           sizeToContent: true,
           options: groupBy.options,
@@ -16797,7 +16770,7 @@ function FilterDropdownMenu(props) {
         }
       ),
       renderFilters(),
-      activeFilterCount > 0 && /* @__PURE__ */ jsx140(Button, { label: "Clear", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn })
+      activeFilterCount > 0 && /* @__PURE__ */ jsx140(Button, { label: "Clear", size: "md", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn })
     ] }),
     !isOpen && /* @__PURE__ */ jsx140(
       FilterChips,
@@ -16849,7 +16822,7 @@ function FilterChips({
   if (chips.length === 0) return null;
   return /* @__PURE__ */ jsxs68("div", { css: Css.df.gap1.fww.aic.order(1).$, children: [
     chips,
-    /* @__PURE__ */ jsx140(Button, { label: "Clear", variant: "tertiary", onClick: onClear, ...testId.clearBtn })
+    /* @__PURE__ */ jsx140(Button, { label: "Clear", size: "md", variant: "tertiary", onClick: onClear, ...testId.clearBtn })
   ] });
 }
 function buildFilterImpls(filterDefs) {
@@ -17371,18 +17344,18 @@ var BeamContext = createContext6({
 });
 function BeamProvider({ children, ...presentationProps }) {
   const [, tick] = useReducer((prev) => prev + 1, 0);
-  const modalRef = useRef47();
+  const modalRef = useRef46();
   const modalHeaderDiv = useMemo38(() => document.createElement("div"), []);
   const modalBodyDiv = useMemo38(() => {
     const el = document.createElement("div");
     el.style.height = "100%";
     return el;
   }, []);
-  const modalCanCloseChecksRef = useRef47([]);
+  const modalCanCloseChecksRef = useRef46([]);
   const modalFooterDiv = useMemo38(() => document.createElement("div"), []);
-  const drawerContentStackRef = useRef47([]);
-  const drawerCanCloseChecks = useRef47([]);
-  const drawerCanCloseDetailsChecks = useRef47([]);
+  const drawerContentStackRef = useRef46([]);
+  const drawerCanCloseChecks = useRef46([]);
+  const drawerCanCloseDetailsChecks = useRef46([]);
   const sdHeaderDiv = useMemo38(() => document.createElement("div"), []);
   const context = useMemo38(() => {
     return {
@@ -17425,14 +17398,14 @@ function useBeamContext() {
 }
 
 // src/components/ButtonDatePicker.tsx
-import { useRef as useRef48 } from "react";
+import { useRef as useRef47 } from "react";
 import { useMenuTrigger as useMenuTrigger4 } from "react-aria";
 import { useMenuTriggerState as useMenuTriggerState4 } from "react-stately";
 import { jsx as jsx151 } from "@emotion/react/jsx-runtime";
 function ButtonDatePicker(props) {
   const { defaultOpen, disabled, trigger, onSelect, ...datePickerProps } = props;
   const state = useMenuTriggerState4({ isOpen: defaultOpen });
-  const buttonRef = useRef48(null);
+  const buttonRef = useRef47(null);
   const { menuTriggerProps, menuProps } = useMenuTrigger4({ isDisabled: !!disabled }, state, buttonRef);
   const tid = useTestIds(
     props,
@@ -17452,7 +17425,7 @@ function ButtonDatePicker(props) {
 }
 
 // src/components/ButtonGroup.tsx
-import { useRef as useRef49 } from "react";
+import { useRef as useRef48 } from "react";
 import { useButton as useButton10, useFocusRing as useFocusRing12, useHover as useHover15 } from "react-aria";
 import { jsx as jsx152, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
 function ButtonGroup(props) {
@@ -17469,7 +17442,7 @@ function ButtonGroup(props) {
 function GroupButton(props) {
   const { icon, iconInc, iconColor, text, active, onClick: onPress, disabled, size, tooltip, ...otherProps } = props;
   const ariaProps = { onPress, isDisabled: !!disabled, ...otherProps };
-  const ref = useRef49(null);
+  const ref = useRef48(null);
   const { buttonProps, isPressed } = useButton10(ariaProps, ref);
   const { isFocusVisible, focusProps } = useFocusRing12();
   const { hoverProps, isHovered } = useHover15(ariaProps);
@@ -17533,14 +17506,14 @@ import { useHover as useHover16 } from "react-aria";
 
 // src/components/Tag.tsx
 import { useResizeObserver as useResizeObserver4 } from "@react-aria/utils";
-import { useRef as useRef50, useState as useState42 } from "react";
+import { useRef as useRef49, useState as useState42 } from "react";
 import { jsx as jsx153, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
 function Tag(props) {
   const { text, type, xss, preventTooltip = false, ...otherProps } = props;
   const typeStyles2 = getStyles(type);
   const tid = useTestIds(otherProps);
   const [showTooltip, setShowTooltip] = useState42(false);
-  const ref = useRef50(null);
+  const ref = useRef49(null);
   useResizeObserver4({
     ref,
     onResize: () => {
@@ -17654,7 +17627,7 @@ function Copy(props) {
 
 // src/components/DnDGrid/DnDGrid.tsx
 import equal2 from "fast-deep-equal";
-import { useCallback as useCallback23, useRef as useRef51 } from "react";
+import { useCallback as useCallback23, useRef as useRef50 } from "react";
 
 // src/components/DnDGrid/DnDGridContext.tsx
 import { createContext as createContext7, useContext as useContext17 } from "react";
@@ -17671,12 +17644,12 @@ function useDnDGridContext() {
 import { jsx as jsx156 } from "@emotion/react/jsx-runtime";
 function DnDGrid(props) {
   const { children, gridStyles, onReorder, activeItemStyles } = props;
-  const gridEl = useRef51(null);
-  const dragEl = useRef51();
-  const cloneEl = useRef51();
-  const initialOrder = useRef51();
-  const reorderViaKeyboard = useRef51(false);
-  const transformFrom = useRef51({ x: 0, y: 0 });
+  const gridEl = useRef50(null);
+  const dragEl = useRef50();
+  const cloneEl = useRef50();
+  const initialOrder = useRef50();
+  const reorderViaKeyboard = useRef50(false);
+  const transformFrom = useRef50({ x: 0, y: 0 });
   const tid = useTestIds(props, "dndGrid");
   const getGridItems = useCallback23(() => {
     return gridEl.current ? Array.from(gridEl.current.querySelectorAll(`[${gridItemIdKey}]`)) : [];
@@ -18045,10 +18018,10 @@ function HbSpinnerProvider({ quips = [], children }) {
 
 // src/components/MaxLines.tsx
 import { useLayoutEffect as useLayoutEffect2, useResizeObserver as useResizeObserver5 } from "@react-aria/utils";
-import { useCallback as useCallback24, useEffect as useEffect29, useRef as useRef52, useState as useState43 } from "react";
+import { useCallback as useCallback24, useEffect as useEffect29, useRef as useRef51, useState as useState43 } from "react";
 import { jsx as jsx161, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
 function MaxLines({ maxLines, children }) {
-  const elRef = useRef52(null);
+  const elRef = useRef51(null);
   const [hasMore, setHasMore] = useState43(false);
   const [expanded, setExpanded] = useState43(false);
   useLayoutEffect2(() => {
@@ -18071,7 +18044,7 @@ function MaxLines({ maxLines, children }) {
 
 // src/components/ScrollShadows.tsx
 import { useResizeObserver as useResizeObserver6 } from "@react-aria/utils";
-import { useCallback as useCallback25, useMemo as useMemo43, useRef as useRef53, useState as useState44 } from "react";
+import { useCallback as useCallback25, useMemo as useMemo43, useRef as useRef52, useState as useState44 } from "react";
 import { jsx as jsx162, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
 function ScrollShadows(props) {
   const { children, xss, horizontal = false, bgColor = "rgba(255,255,255,1)" /* White */ } = props;
@@ -18082,7 +18055,7 @@ function ScrollShadows(props) {
   }
   const [showStartShadow, setShowStartShadow] = useState44(false);
   const [showEndShadow, setShowEndShadow] = useState44(false);
-  const scrollRef = useRef53(null);
+  const scrollRef = useRef52(null);
   const [startShadowStyles, endShadowStyles] = useMemo43(() => {
     const transparentBgColor = bgColor.replace(/,1\)$/, ",0)");
     const commonStyles = Css.absolute.z3.add({ pointerEvents: "none" }).$;
@@ -18193,7 +18166,7 @@ function useSnackbar() {
 var snackbarId = 1;
 
 // src/components/Stepper.tsx
-import { useRef as useRef54 } from "react";
+import { useRef as useRef53 } from "react";
 import { useButton as useButton11, useFocusRing as useFocusRing14, useHover as useHover18 } from "react-aria";
 import { jsx as jsx163, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
 function Stepper(props) {
@@ -18237,7 +18210,7 @@ function Stepper(props) {
 function StepButton(props) {
   const { label, disabled, state, isCurrent, onClick } = props;
   const ariaProps = { onPress: onClick, isDisabled: disabled };
-  const ref = useRef54(null);
+  const ref = useRef53(null);
   const { buttonProps, isPressed } = useButton11(ariaProps, ref);
   const { isFocusVisible, focusProps } = useFocusRing14();
   const { hoverProps, isHovered } = useHover18(ariaProps);
@@ -18526,7 +18499,7 @@ var SuperDrawerContent = ({ children, actions }) => {
 
 // src/components/Tabs.tsx
 import { camelCase as camelCase5 } from "change-case";
-import { useEffect as useEffect31, useMemo as useMemo45, useRef as useRef55, useState as useState45 } from "react";
+import { useEffect as useEffect31, useMemo as useMemo45, useRef as useRef54, useState as useState45 } from "react";
 import { mergeProps as mergeProps13, useFocusRing as useFocusRing15, useHover as useHover19 } from "react-aria";
 import { matchPath, Route } from "react-router";
 import { Link as Link5, useLocation } from "react-router-dom";
@@ -18573,7 +18546,7 @@ function Tabs(props) {
   const { isFocusVisible, focusProps } = useFocusRing15();
   const tid = useTestIds(others, "tabs");
   const [active, setActive] = useState45(selected);
-  const ref = useRef55(null);
+  const ref = useRef54(null);
   useEffect31(() => setActive(selected), [selected]);
   function onKeyUp(e) {
     if (e.key === "ArrowLeft" || e.key === "ArrowRight") {