@homebound/beam 2.95.2 → 2.96.2

package/README.md

@@ -23,7 +23,7 @@ _To see the latest designs, check out the [Figma](https://www.figma.com/file/aWU
 
 ## Beam's API Design Approach
 
-Beam is specifically "Homebound's design system". Given this extremely narrow purpose, we can lean into the simplicity of:
+Beam is specifically "Homebound's Design System". Given this extremely narrow purpose, we can lean into the simplicity of:
 
 - We don't need to support everything for everyone
 - We can prefer API/UX consistency & simplicity over configuration & complexity

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

@@ -209,7 +209,7 @@ declare type GridRowKind<R extends Kinded, P extends R["kind"]> = DiscriminateUn
  * - For server-side sorting, it's the sortKey to pass back to the server to
  * request "sort by this column".
  *
- * - For client-side sorting, it the type `number`, to represent the current
+ * - For client-side sorting, it's type `number`, to represent the current
  * column being sorted, in which case we use the GridCellContent.value.
  */
 export declare type GridColumn<R extends Kinded, S = {}> = {
@@ -270,7 +270,8 @@ export declare type GridCellAlignment = "left" | "right" | "center";
  * primitive value for filtering and sorting.
  */
 export declare type GridCellContent = {
-    content: ReactNode;
+    /** The JSX content of the cell. Virtual tables that client-side sort should use a function to avaid perf overhead. */
+    content: ReactNode | (() => ReactNode);
     alignment?: GridCellAlignment;
     /** Allow value to be a function in case it's a dynamic value i.e. reading from an inline-edited proxy. */
     value?: MaybeFn<number | string | Date | boolean | null | undefined>;

package/dist/components/Table/GridTable.js

@@ -403,7 +403,7 @@ function maybeAddCardColumns(sizes, firstLastColumnWidth) {
 }
 function getIndentationCss(style, rowStyle, columnIndex, maybeContent) {
     // Look for cell-specific indent or row-specific indent (row-specific is only one the first column)
-    const indent = (isContentAndSettings(maybeContent) && maybeContent.indent) || (columnIndex === 0 && (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.indent));
+    const indent = (isGridCellContent(maybeContent) && maybeContent.indent) || (columnIndex === 0 && (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.indent));
     return indent === 1 ? style.indentOneCss || {} : indent === 2 ? style.indentTwoCss || {} : {};
 }
 function getFirstOrLastCellCss(style, columnIndex, columns) {
@@ -451,10 +451,10 @@ function GridRow(props) {
                     return;
                 }
                 const maybeContent = applyRowFn(column, row);
-                currentColspan = isContentAndSettings(maybeContent) ? (_a = maybeContent.colspan) !== null && _a !== void 0 ? _a : 1 : 1;
+                currentColspan = isGridCellContent(maybeContent) ? (_a = maybeContent.colspan) !== null && _a !== void 0 ? _a : 1 : 1;
                 const canSortColumn = ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client" && column.clientSideSort !== false) ||
                     ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "server" && !!column.serverSideSortKey);
-                const content = toContent(maybeContent, isHeader, canSortColumn, style);
+                const content = toContent(maybeContent, isHeader, canSortColumn, (sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client", style, as);
                 (0, sortRows_1.ensureClientSideSortValueIsSortable)(sorting, isHeader, column, columnIndex, maybeContent);
                 // Note that it seems expensive to calc a per-cell class name/CSS-in-JS output,
                 // vs. setting global/table-wide CSS like `style.cellCss` on the root grid div with
@@ -502,26 +502,44 @@ const ObservedGridRow = react_1.default.memo((props) => ((0, jsx_runtime_1.jsx)(
         // Invoke this just as a regular function so that Observer sees the proxy access's
         return GridRow(props);
     } }, void 0)));
+/** A heuristic to detect the result of `React.createElement` / i.e. JSX. */
+function isJSX(content) {
+    return typeof content === "object" && content && "type" in content && "props" in content;
+}
 /** If a column def return just string text for a given row, apply some default styling. */
-function toContent(content, isHeader, canSortColumn, style) {
-    if (typeof content === "string" && isHeader && canSortColumn) {
+function toContent(content, isHeader, canSortColumn, isClientSideSorting, style, as) {
+    content = isGridCellContent(content) ? content.content : content;
+    if (typeof content === "function") {
+        // Actually create the JSX by calling `content()` here (which should be as late as
+        // possible, i.e. only for visible rows if we're in a virtual table).
+        content = content();
+    }
+    else if (as === "virtual" && canSortColumn && isClientSideSorting && isJSX(content)) {
+        // When using client-side sorting, we call `applyRowFn` not only during rendering, but
+        // up-front against all rows (for the currently sorted column) to determine their
+        // sort values.
+        //
+        // Pedantically this means that any table using client-side sorting should not
+        // build JSX directly in its GridColumn functions, but this overhead is especially
+        // noticeable for large/virtualized tables, so we only enforce using functions
+        // for those tables.
+        throw new Error("GridTables with as=virtual & sortable columns should use functions that return JSX, instead of JSX");
+    }
+    if (content && typeof content === "string" && isHeader && canSortColumn) {
         return (0, jsx_runtime_1.jsx)(SortHeader_1.SortHeader, { content: content }, void 0);
     }
     else if (style.emptyCell && isContentEmpty(content)) {
         // If the content is empty and the user specified an `emptyCell` node, return that.
         return style.emptyCell;
     }
-    else if (isContentAndSettings(content)) {
-        return content.content;
-    }
     return content;
 }
-function isContentAndSettings(content) {
+function isGridCellContent(content) {
     return typeof content === "object" && !!content && "content" in content;
 }
 const emptyValues = ["", null, undefined];
 function isContentEmpty(content) {
-    return emptyValues.includes(isContentAndSettings(content) ? content.content : content);
+    return emptyValues.includes(content);
 }
 /** Return the content for a given column def applied to a given row. */
 function applyRowFn(column, row) {
@@ -548,8 +566,8 @@ const defaultRenderFn = (as) => (key, css, content) => {
 };
 exports.GridCollapseContext = react_1.default.createContext({
     headerCollapsed: false,
-    isCollapsed: (id) => false,
-    toggleCollapsed: (id) => { },
+    isCollapsed: () => false,
+    toggleCollapsed: () => { },
 });
 /** Sets up the `GridContext` so that header cells can access the current sort settings. */
 const headerRenderFn = (columns, column, sortState, setSortKey, as) => (key, css, content) => {
@@ -588,7 +606,7 @@ const alignmentToTextAlign = {
 };
 // For alignment, use: 1) cell def, else 2) column def, else 3) left.
 function getJustification(column, maybeContent, as) {
-    const alignment = (isContentAndSettings(maybeContent) && maybeContent.alignment) || column.align || "left";
+    const alignment = (isGridCellContent(maybeContent) && maybeContent.alignment) || column.align || "left";
     // Always apply text alignment.
     const textAlign = Css_1.Css.add("textAlign", alignmentToTextAlign[alignment]).$;
     if (as === "table") {

package/dist/forms/BoundCheckboxField.d.ts

@@ -1,6 +1,6 @@
 import { FieldState } from "@homebound/form-state";
 import { CheckboxProps } from "../inputs";
-export declare type BoundCheckboxFieldProps = Omit<CheckboxProps, "values" | "onChange" | "label" | "onBlur" | "onFocus"> & {
+export declare type BoundCheckboxFieldProps = Omit<CheckboxProps, "values" | "onChange" | "label"> & {
     field: FieldState<any, boolean | null | undefined>;
     /** Make optional so that callers can override if they want to. */
     onChange?: (values: boolean) => void;

package/dist/forms/BoundCheckboxField.js

@@ -8,7 +8,7 @@ const utils_1 = require("../utils");
 const defaultLabel_1 = require("../utils/defaultLabel");
 /** Wraps `Checkbox` and binds it to a form field. */
 function BoundCheckboxField(props) {
-    const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), ...others } = props;
+    const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onFocus, onBlur, ...others } = props;
     const testId = (0, utils_1.useTestIds)(props, field.key);
     return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
             var _a;
@@ -16,7 +16,13 @@ function BoundCheckboxField(props) {
                     // We are triggering blur manually for checkbox fields due to its transactional nature
                     onChange(selected);
                     field.blur();
-                }, errorMsg: field.touched ? field.errors.join(" ") : undefined }, testId, others), void 0));
+                }, errorMsg: field.touched ? field.errors.join(" ") : undefined, onFocus: () => {
+                    field.focus();
+                    (0, utils_1.maybeCall)(onFocus);
+                }, onBlur: () => {
+                    field.blur();
+                    (0, utils_1.maybeCall)(onBlur);
+                } }, testId, others), void 0));
         } }, void 0));
 }
 exports.BoundCheckboxField = BoundCheckboxField;

package/dist/inputs/Checkbox.d.ts

@@ -14,5 +14,9 @@ export interface CheckboxProps {
     selected?: boolean;
     errorMsg?: string;
     helperText?: string | ReactNode;
+    /** Callback fired when focus removes from the component */
+    onBlur?: () => void;
+    /** Callback fired when focus is set to the component */
+    onFocus?: () => void;
 }
 export declare function Checkbox(props: CheckboxProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/CheckboxBase.js

@@ -23,7 +23,7 @@ function CheckboxBase(props) {
             .maxw((0, Css_1.px)(320))
             .if(description !== undefined)
             .maxw((0, Css_1.px)(344))
-            .if(isDisabled).cursorNotAllowed.$ }, { children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref }, inputProps, focusProps, tid), void 0) }, void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({}, hoverProps, { css: {
+            .if(isDisabled).cursorNotAllowed.$ }, { children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref }, (0, react_aria_1.mergeProps)(inputProps, focusProps), tid), void 0) }, void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({}, hoverProps, { css: {
                     ...baseStyles,
                     ...((isSelected || isIndeterminate) && filledBoxStyles),
                     ...((isSelected || isIndeterminate) && isHovered && filledBoxHoverStyles),

package/dist/inputs/ChipSelectField.js

@@ -42,7 +42,7 @@ function ChipSelectField(props) {
         },
         onBlur: (e) => {
             // Do not call onBlur if focus moved to within the Popover
-            if (popoverRef.current && popoverRef.current.contains(e.relatedTarget)) {
+            if ((popoverRef.current && popoverRef.current.contains(e.relatedTarget)) || showInput) {
                 return;
             }
             (0, utils_1.maybeCall)(onBlur);

package/dist/inputs/SelectField.mock.js

@@ -7,7 +7,7 @@ const utils_1 = require("../utils");
 function SelectField(props) {
     const { getOptionValue = (o) => o.id, // if unset, assume O implements HasId
     getOptionLabel = (o) => o.name, // if unset, assume O implements HasName
-    value, options, onSelect, readOnly = false, errorMsg, onBlur, onFocus, disabled, } = props;
+    value, options, onSelect, readOnly = false, errorMsg, onBlur, onFocus, disabled, disabledOptions = [], } = props;
     const tid = (0, utils_1.useTestIds)(props, "select");
     const currentOption = options.find((o) => getOptionValue(o) === value) || options[0];
     return ((0, jsx_runtime_1.jsxs)("select", Object.assign({}, tid, { value: 
@@ -24,7 +24,7 @@ function SelectField(props) {
         }, 
         // Read Only does not apply to `select` fields, instead we'll add in disabled for tests to verify.
         disabled: !!(disabled || readOnly), "data-error": !!errorMsg, "data-errormsg": errorMsg, "data-readonly": readOnly }, { children: [(0, jsx_runtime_1.jsx)("option", { disabled: true, value: "" }, void 0), options.map((option, i) => {
-                return ((0, jsx_runtime_1.jsx)("option", Object.assign({ value: `${getOptionValue(option)}` }, { children: getOptionLabel(option) }), i));
+                return ((0, jsx_runtime_1.jsx)("option", Object.assign({ value: `${getOptionValue(option)}`, disabled: disabledOptions.includes(getOptionValue(option)) }, { children: getOptionLabel(option) }), i));
             })] }), void 0));
 }
 exports.SelectField = SelectField;

package/package.json

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