@homebound/beam 2.165.0 → 2.167.0

package/dist/components/Icon.d.ts

@@ -50,6 +50,8 @@ export declare const Icons: {
     archive: import("@emotion/react/jsx-runtime").JSX.Element;
     unarchive: import("@emotion/react/jsx-runtime").JSX.Element;
     duplicate: import("@emotion/react/jsx-runtime").JSX.Element;
+    filter: import("@emotion/react/jsx-runtime").JSX.Element;
+    columns: import("@emotion/react/jsx-runtime").JSX.Element;
     errorCircle: import("@emotion/react/jsx-runtime").JSX.Element;
     checkCircle: import("@emotion/react/jsx-runtime").JSX.Element;
     infoCircle: import("@emotion/react/jsx-runtime").JSX.Element;
@@ -65,6 +67,10 @@ export declare const Icons: {
     chevronLeft: import("@emotion/react/jsx-runtime").JSX.Element;
     chevronRight: import("@emotion/react/jsx-runtime").JSX.Element;
     arrowBack: import("@emotion/react/jsx-runtime").JSX.Element;
+    arrowLeft: import("@emotion/react/jsx-runtime").JSX.Element;
+    arrowUp: import("@emotion/react/jsx-runtime").JSX.Element;
+    arrowDown: import("@emotion/react/jsx-runtime").JSX.Element;
+    arrowRight: import("@emotion/react/jsx-runtime").JSX.Element;
     menuClose: import("@emotion/react/jsx-runtime").JSX.Element;
     menuOpen: import("@emotion/react/jsx-runtime").JSX.Element;
     camera: import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Icon.js

@@ -51,6 +51,8 @@ exports.Icons = {
     archive: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", d: "M19 10H5L5 18H19V10ZM3 8V18C3 19.1046 3.89543 20 5 20H19C20.1046 20 21 19.1046 21 18V8H3Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", d: "M3.81818 6V8H20.1818V6H3.81818ZM2.90909 4C2.40701 4 2 4.44772 2 5V9C2 9.55228 2.40701 10 2.90909 10H21.0909C21.593 10 22 9.55228 22 9V5C22 4.44772 21.593 4 21.0909 4H2.90909Z" }, void 0), (0, jsx_runtime_1.jsx)("rect", { x: "8", y: "11", width: "8", height: "2", rx: "1" }, void 0)] }, void 0)),
     unarchive: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M13 12V8H16L12 3L8 8H11V12H13Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M17 10H19V18H5L5 10H7V8H3V18C3 19.1046 3.89543 20 5 20H19C20.1046 20 21 19.1046 21 18V8H17V10Z" }, void 0), (0, jsx_runtime_1.jsx)("rect", { x: "8", y: "15", width: "8", height: "2", rx: "1" }, void 0)] }, void 0)),
     duplicate: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M11 10H9V13H6V15H9V18H11V15H14V13H11V10Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M4 22H16C17.103 22 18 21.103 18 20V8C18 6.897 17.103 6 16 6H4C2.897 6 2 6.897 2 8V20C2 21.103 2.897 22 4 22ZM4 8H16L16.002 20H4V8Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M20 2H8V4H20V16H22V4C22 2.897 21.103 2 20 2Z" }, void 0)] }, void 0)),
+    filter: ((0, jsx_runtime_1.jsx)("path", { d: "M7.625 4C7.14175 4 6.75 4.39797 6.75 4.88889V5.92952C5.73046 6.29559 5 7.28336 5 8.44444C5 9.60553 5.73046 10.5933 6.75 10.9594V19.1111C6.75 19.602 7.14175 20 7.625 20C8.10825 20 8.5 19.602 8.5 19.1111V10.9594C9.51954 10.5933 10.25 9.60553 10.25 8.44444C10.25 7.28336 9.51954 6.29559 8.5 5.92952V4.88889C8.5 4.39797 8.10825 4 7.625 4ZM8.5 8.44444C8.5 8.93537 8.10825 9.33333 7.625 9.33333C7.14175 9.33333 6.75 8.93537 6.75 8.44444C6.75 7.95353 7.14175 7.55556 7.625 7.55556C8.10825 7.55556 8.5 7.95353 8.5 8.44444ZM16.375 4C15.8917 4 15.5 4.39797 15.5 4.88889V12.1517C14.4805 12.5178 13.75 13.5056 13.75 14.6667C13.75 15.8277 14.4805 16.8156 15.5 17.1816V19.1111C15.5 19.602 15.8917 20 16.375 20C16.8583 20 17.25 19.602 17.25 19.1111V17.1816C18.2695 16.8156 19 15.8277 19 14.6667C19 13.5056 18.2695 12.5178 17.25 12.1517V4.88889C17.25 4.39797 16.8583 4 16.375 4ZM17.25 14.6667C17.25 15.1576 16.8583 15.5556 16.375 15.5556C15.8917 15.5556 15.5 15.1576 15.5 14.6667C15.5 14.1757 15.8917 13.7778 16.375 13.7778C16.8583 13.7778 17.25 14.1757 17.25 14.6667Z" }, void 0)),
+    columns: ((0, jsx_runtime_1.jsx)("path", { d: "M5.525 4C4.68277 4 4 4.68277 4 5.525V19.0806C4 19.9228 4.68277 20.6056 5.525 20.6056H8.91389C9.75612 20.6056 10.4389 19.9228 10.4389 19.0806V5.525C10.4389 4.68277 9.75612 4 8.91389 4H5.525ZM14.3361 4C13.4939 4 12.8111 4.68277 12.8111 5.525V19.0806C12.8111 19.9228 13.4939 20.6056 14.3361 20.6056H17.725C18.5672 20.6056 19.25 19.9228 19.25 19.0806V5.525C19.25 4.68277 18.5672 4 17.725 4H14.3361ZM5.69444 18.9111V5.69444H8.74444V18.9111H5.69444ZM14.5056 18.9111V5.69444H17.5556V18.9111H14.5056Z" }, void 0)),
     // Alerts
     errorCircle: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M11.953 2C6.465 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.493 2 11.953 2ZM12 20C7.589 20 4 16.411 4 12C4 7.589 7.567 4 11.953 4C16.391 4 20 7.589 20 12C20 16.411 16.411 20 12 20Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M11 7H13V14H11V7ZM11 15H13V17H11V15Z" }, void 0)] }, void 0)),
     checkCircle: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2ZM12 20C7.589 20 4 16.411 4 12C4 7.589 7.589 4 12 4C16.411 4 20 7.589 20 12C20 16.411 16.411 20 12 20Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M9.99909 13.587L7.70009 11.292L6.28809 12.708L10.0011 16.413L16.7071 9.70697L15.2931 8.29297L9.99909 13.587Z" }, void 0)] }, void 0)),
@@ -68,6 +70,10 @@ exports.Icons = {
     chevronLeft: ((0, jsx_runtime_1.jsx)("path", { d: "M13.2929 6.29297L7.58594 12L13.2929 17.707L14.7069 16.293L10.4139 12L14.7069 7.70697L13.2929 6.29297Z" }, void 0)),
     chevronRight: ((0, jsx_runtime_1.jsx)("path", { d: "M10.707 17.707L16.414 12L10.707 6.29297L9.29297 7.70697L13.586 12L9.29297 16.293L10.707 17.707Z" }, void 0)),
     arrowBack: ((0, jsx_runtime_1.jsx)("path", { d: "M20.9999 11H6.41394L11.7069 5.70697L10.2929 4.29297L2.58594 12L10.2929 19.707L11.7069 18.293L6.41394 13H20.9999V11Z" }, void 0)),
+    arrowLeft: ((0, jsx_runtime_1.jsx)("path", { d: "M20.9999 11H6.41394L11.7069 5.70697L10.2929 4.29297L2.58594 12L10.2929 19.707L11.7069 18.293L6.41394 13H20.9999V11Z" }, void 0)),
+    arrowUp: ((0, jsx_runtime_1.jsx)("path", { d: "M12.793 21.207L12.793 6.62097L18.086 11.914L19.5 10.5L11.793 2.79297L4.086 10.5L5.5 11.914L10.793 6.62097L10.793 21.207L12.793 21.207Z" }, void 0)),
+    arrowDown: ((0, jsx_runtime_1.jsx)("path", { d: "M10.7929 2.79303L10.7929 17.379L5.49994 12.086L4.08594 13.5L11.7929 21.207L19.4999 13.5L18.0859 12.086L12.7929 17.379L12.7929 2.79303L10.7929 2.79303Z" }, void 0)),
+    arrowRight: ((0, jsx_runtime_1.jsx)("path", { d: "M2.586 13L17.172 13L11.879 18.293L13.293 19.707L21 12L13.293 4.29303L11.879 5.70703L17.172 11L2.586 11L2.586 13Z" }, void 0)),
     menuClose: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M8 6H24V8H8V6ZM8 11H24V13H8V11ZM8 16H24V18H8V16Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M5 8.94L1.94667 12L5 15.06L4.06 16L0.0599999 12L4.06 8L5 8.94Z" }, void 0)] }, void 0)),
     menuOpen: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M8 6H24V8H8V6ZM8 11H24V13H8V11ZM8 16H24V18H8V16Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M0.0600583 15.06L3.11339 12L0.0600586 8.94L1.00006 8L5.00006 12L1.00006 16L0.0600583 15.06Z" }, void 0)] }, void 0)),
     // Media

package/dist/components/Table/GridTable.d.ts

@@ -274,7 +274,7 @@ export declare type GridColumn<R extends Kinded, S = {}> = {
 };
 export declare const nonKindGridColumnKeys: string[];
 /** Allows rendering a specific cell. */
-declare type RenderCellFn<R extends Kinded> = (idx: number, css: Properties, content: ReactNode, row: R, rowStyle: RowStyle<R> | undefined) => ReactNode;
+declare type RenderCellFn<R extends Kinded> = (idx: number, css: Properties, content: ReactNode, row: R, rowStyle: RowStyle<R> | undefined, classNames: string | undefined) => ReactNode;
 /** Defines row-specific styling for each given row `kind` in `R` */
 export declare type GridRowStyles<R extends Kinded> = {
     [P in R["kind"]]?: RowStyle<DiscriminateUnion<R, "kind", P>>;
@@ -316,6 +316,8 @@ export declare type GridCellContent = {
     onClick?: () => {} | string;
     /** Custom css to apply directly to this cell, i.e. cell-specific borders. */
     css?: Properties;
+    /** Allows cell to reveal content when the user hovers over a row. Content must be wrapped in an element in order to be hidden. IE <div>{value}</div>*/
+    revealOnRowHover?: true;
 };
 declare type MaybeFn<T> = T | (() => T);
 /**

package/dist/components/Table/GridTable.js

@@ -490,6 +490,7 @@ function GridRow(props) {
             .map((openCardKind) => style.nestedCards.kinds[openCardKind])
             .filter((style) => style)
         : undefined;
+    const revealOnRowHoverClass = "revealOnRowHover";
     const rowStyleCellCss = maybeApplyFunction(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.cellCss);
     const rowCss = {
         // For virtual tables use `display: flex` to keep all cells on the same row. For each cell in the row use `flexNone` to ensure they stay their defined widths
@@ -502,6 +503,10 @@ function GridRow(props) {
         // Maybe add the sticky header styles
         ...((isHeader || isTotals) && stickyHeader ? Css_1.Css.sticky.topPx(stickyOffset).z2.$ : undefined),
         ...(0, nestedCards_1.getNestedCardStyles)(row, openCardStyles, style, isActive),
+        ...{
+            [` > .${revealOnRowHoverClass} > *`]: Css_1.Css.invisible.$,
+            [`:hover > .${revealOnRowHoverClass} > *`]: Css_1.Css.visible.$,
+        },
     };
     let currentColspan = 1;
     let firstContentColumnStylesApplied = false;
@@ -523,6 +528,7 @@ function GridRow(props) {
             }
             const maybeContent = applyRowFn(column, row, api, level);
             currentColspan = isGridCellContent(maybeContent) ? (_a = maybeContent.colspan) !== null && _a !== void 0 ? _a : 1 : 1;
+            const revealOnRowHover = isGridCellContent(maybeContent) ? maybeContent.revealOnRowHover : false;
             const canSortColumn = (sortOn === "client" && column.clientSideSort !== false) ||
                 (sortOn === "server" && !!column.serverSideSortKey);
             const alignment = getAlignment(column, maybeContent);
@@ -598,6 +604,7 @@ function GridRow(props) {
                 },
                 ...(column.mw ? Css_1.Css.mw(column.mw).$ : {}),
             };
+            const cellClassNames = revealOnRowHover ? revealOnRowHoverClass : undefined;
             const renderFn = ((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.renderCell) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink)) && wrapAction
                 ? rowLinkRenderFn(as)
                 : isHeader
@@ -605,7 +612,7 @@ function GridRow(props) {
                     : (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick) && wrapAction
                         ? rowClickRenderFn(as, api)
                         : defaultRenderFn(as);
-            return renderFn(columnIndex, cellCss, content, row, rowStyle);
+            return renderFn(columnIndex, cellCss, content, row, rowStyle, cellClassNames);
         }) }), void 0));
     return openCardStyles && openCardStyles.length > 0 ? (0, nestedCards_1.wrapCard)(openCardStyles, rowNode) : rowNode;
 }
@@ -696,12 +703,12 @@ function applyRowFn(column, row, api, level) {
 }
 exports.applyRowFn = applyRowFn;
 /** Renders our default cell element, i.e. if no row links and no custom renderCell are used. */
-const defaultRenderFn = (as) => (key, css, content) => {
+const defaultRenderFn = (as) => (key, css, content, row, rowStyle, classNames) => {
     const Cell = as === "table" ? "td" : "div";
-    return ((0, jsx_runtime_1.jsx)(Cell, Object.assign({ css: { ...css, ...tableRowStyles(as) } }, { children: content }), key));
+    return ((0, jsx_runtime_1.jsx)(Cell, Object.assign({ css: { ...css, ...tableRowStyles(as) }, className: classNames }, { children: content }), key));
 };
 /** Sets up the `GridContext` so that header cells can access the current sort settings. */
-const headerRenderFn = (columns, column, sortState, setSortKey, as) => (key, css, content) => {
+const headerRenderFn = (columns, column, sortState, setSortKey, as) => (key, css, content, row, rowStyle, classNames) => {
     const [currentKey, direction] = sortState || [];
     // If server-side sorting, use the user's key for this column; client-side sorting, use the index.
     const ourSortKey = column.serverSideSortKey || columns.indexOf(column);
@@ -709,21 +716,21 @@ const headerRenderFn = (columns, column, sortState, setSortKey, as) => (key, css
         sorted: ourSortKey === currentKey ? direction : undefined,
         toggleSort: () => setSortKey(ourSortKey),
     };
-    const Row = as === "table" ? "th" : "div";
-    return ((0, jsx_runtime_1.jsx)(GridSortContext_1.GridSortContext.Provider, Object.assign({ value: context }, { children: (0, jsx_runtime_1.jsx)(Row, Object.assign({ css: { ...css, ...tableRowStyles(as, column) } }, { children: content }), void 0) }), key));
+    const Cell = as === "table" ? "th" : "div";
+    return ((0, jsx_runtime_1.jsx)(GridSortContext_1.GridSortContext.Provider, Object.assign({ value: context }, { children: (0, jsx_runtime_1.jsx)(Cell, Object.assign({ css: { ...css, ...tableRowStyles(as, column) }, className: classNames }, { children: content }), void 0) }), key));
 };
 /** Renders a cell element when a row link is in play. */
-const rowLinkRenderFn = (as) => (key, css, content, row, rowStyle) => {
+const rowLinkRenderFn = (as) => (key, css, content, row, rowStyle, classNames) => {
     const to = rowStyle.rowLink(row);
     if (as === "table") {
-        return ((0, jsx_runtime_1.jsx)("td", Object.assign({ css: { ...css, ...tableRowStyles(as) } }, { children: (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({ to: to, css: Css_1.Css.noUnderline.color("unset").db.$, className: CssReset_1.navLink }, { children: content }), void 0) }), key));
+        return ((0, jsx_runtime_1.jsx)("td", Object.assign({ css: { ...css, ...tableRowStyles(as) }, className: classNames }, { children: (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({ to: to, css: Css_1.Css.noUnderline.color("unset").db.$, className: CssReset_1.navLink }, { children: content }), void 0) }), key));
     }
-    return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({ to: to, css: { ...Css_1.Css.noUnderline.color("unset").$, ...css }, className: CssReset_1.navLink }, { children: content }), key));
+    return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({ to: to, css: { ...Css_1.Css.noUnderline.color("unset").$, ...css }, className: `${CssReset_1.navLink} ${classNames}` }, { children: content }), key));
 };
 /** Renders a cell that will fire the RowStyle.onClick. */
-const rowClickRenderFn = (as, api) => (key, css, content, row, rowStyle) => {
+const rowClickRenderFn = (as, api) => (key, css, content, row, rowStyle, classNames) => {
     const Row = as === "table" ? "tr" : "div";
-    return ((0, jsx_runtime_1.jsx)(Row, Object.assign({}, { key }, { css: { ...css, ...tableRowStyles(as) }, onClick: () => rowStyle.onClick(row, api) }, { children: content }), void 0));
+    return ((0, jsx_runtime_1.jsx)(Row, Object.assign({}, { key }, { css: { ...css, ...tableRowStyles(as) }, className: classNames, onClick: () => rowStyle.onClick(row, api) }, { children: content }), void 0));
 };
 const alignmentToJustify = {
     left: "flex-start",

package/dist/inputs/ToggleChipGroup.js

@@ -13,7 +13,7 @@ function ToggleChipGroup(props) {
     const state = (0, react_stately_1.useCheckboxGroupState)({ ...props, value: values });
     const { groupProps, labelProps } = (0, react_aria_1.useCheckboxGroup)(props, state);
     const tid = (0, useTestIds_1.useTestIds)(props, "toggleChip");
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, groupProps, { css: Css_1.Css.relative.$ }, { children: [(0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({ label: label }, labelProps, { hidden: hideLabel }), void 0), (0, jsx_runtime_1.jsx)("div", { children: options.map((o) => ((0, jsx_runtime_1.jsx)(ToggleChip, Object.assign({ value: o.value, groupState: state, selected: state.value.includes(o.value), label: o.label }, tid[o.value]), o.value))) }, void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, groupProps, { css: Css_1.Css.relative.$ }, { children: [(0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({ label: label }, labelProps, { hidden: hideLabel }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.df.gap1.add("flexWrap", "wrap").$ }, { children: options.map((o) => ((0, jsx_runtime_1.jsx)(ToggleChip, Object.assign({ value: o.value, groupState: state, selected: state.value.includes(o.value), label: o.label }, tid[o.value]), o.value))) }), void 0)] }), void 0));
 }
 exports.ToggleChipGroup = ToggleChipGroup;
 function ToggleChip(props) {
@@ -22,7 +22,7 @@ function ToggleChip(props) {
     const { inputProps } = (0, react_aria_1.useCheckboxGroupItem)({ value, "aria-label": label }, groupState, ref);
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)();
     return ((0, jsx_runtime_1.jsxs)("label", Object.assign({ css: {
-            ...Css_1.Css.relative.dib.br16.sm.px1.cursorPointer.pyPx(4).mr1.mb1.bgGray200.$,
+            ...Css_1.Css.relative.dib.br16.sm.px1.cursorPointer.pyPx(4).bgGray200.$,
             ...(isSelected
                 ? {
                     ...Css_1.Css.white.bgLightBlue700.$,

package/package.json

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