@homebound/beam 3.0.0-alpha.5 → 3.0.0-alpha.6

package/README.md

@@ -69,4 +69,8 @@ In this way, Beam should be seen as a place to "copy & paste" start from, rather
 
 ## Alpha release
 
-Beam does support [semantic releases](https://semantic-release.gitbook.io/semantic-release/recipes/release-workflow/pre-releases). Homebound most common use case is pushing to the `alpha` branch.
+Beam follows [semantic releases](https://semantic-release.gitbook.io/semantic-release/recipes/release-workflow/pre-releases).
+
+If you want to make an alpha release, just create/push to the `alpha` branch.
+
+You don't need to create a PR for the `alpha` branch.

package/dist/index.cjs

@@ -221,6 +221,7 @@ __export(index_exports, {
   formatValue: () => formatValue,
   generateColumnId: () => generateColumnId,
   getAlignment: () => getAlignment,
+  getColumnBorderCss: () => getColumnBorderCss,
   getDateFormat: () => getDateFormat,
   getFirstOrLastCellCss: () => getFirstOrLastCellCss,
   getJustification: () => getJustification,
@@ -4085,6 +4086,12 @@ var CssBuilder = class _CssBuilder {
   get onDisabled() {
     return this.newCss({ selector: ":disabled" });
   }
+  get ifFirstOfType() {
+    return this.newCss({ selector: ":first-of-type" });
+  }
+  get ifLastOfType() {
+    return this.newCss({ selector: ":last-of-type" });
+  }
   /** Marks this element as a default hover marker (for ancestor pseudo selectors). */
   get marker() {
     return this;
@@ -4164,6 +4171,11 @@ var CssBuilder = class _CssBuilder {
   addCss(props) {
     return this.add(omitUndefinedValues(props));
   }
+  /** Marker for the build-time transform to append a raw className. */
+  className(className) {
+    void className;
+    return this;
+  }
   /** Convert a style hash into `{ className, style }` props for manual spreading into non-`css=` contexts. */
   props(styles) {
     return (0, import_runtime.trussProps)(styles);
@@ -4191,7 +4203,7 @@ function px(pixels) {
   return `${pixels}px`;
 }
 function omitUndefinedValues(value) {
-  const entries = Object.entries(value).filter(function([, entryValue]) {
+  const entries = Object.entries(value).filter(([, entryValue]) => {
     return entryValue !== void 0;
   });
   return Object.fromEntries(entries);
@@ -5315,6 +5327,7 @@ var nonKindGridColumnKeys = [
   "serverSideSortKey",
   "clientSideSort",
   "sticky",
+  "border",
   "wrapAction",
   "isAction",
   "id",
@@ -6035,6 +6048,19 @@ function getFirstOrLastCellCss(style, columnIndex, columns, colspan = 1) {
     ...columnIndex + colspan >= columns.length ? style.lastCellCss : {}
   };
 }
+function getColumnBorderCss(border, style) {
+  if (!border) return {};
+  return {
+    ...border === "left" ? {
+      borderLeftStyle: "bl_borderLeftStyle",
+      borderLeftWidth: "bl_borderLeftWidth"
+    } : {
+      borderRightStyle: "br_borderRightStyle",
+      borderRightWidth: "br_borderRightWidth"
+    },
+    ...style.borderStyle
+  };
+}
 function isJSX(content) {
   return typeof content === "object" && content && "type" in content && "props" in content;
 }
@@ -7314,6 +7340,9 @@ function memoizedTableStyles() {
           borderRightWidth: "br_borderRightWidth",
           borderColor: "bcGray200"
         } : void 0,
+        borderStyle: {
+          borderColor: "bcGray200"
+        },
         firstRowCellCss: bordered ? {
           borderTopStyle: "bt_borderTopStyle",
           borderTopWidth: "bt_borderTopWidth",
@@ -8124,6 +8153,8 @@ function RowImpl(props) {
       ...isBodyRow && levelStyle?.cellCss,
       // Level specific styling for the first content column
       ...applyFirstContentColumnStyles && levelStyle?.firstContentColumn,
+      // Apply any declarative column border styling after header/body defaults.
+      ...getColumnBorderCss(column2.border, style),
       // The specific cell's css (if any from GridCellContent)
       ...rowStyleCellCss,
       // Apply active row styling for non-nested card styles.
@@ -8363,7 +8394,6 @@ function TextFieldBase(props) {
   } = internalProps;
   const errorMessageId = `${inputProps.id}-error`;
   const labelSuffix = useLabelSuffix(required, inputProps.readOnly);
-  const ElementType = multiline ? "textarea" : "input";
   const tid = useTestIds(props, defaultTestId(label));
   const [isFocused, setIsFocused] = (0, import_react26.useState)(false);
   const {
@@ -8598,6 +8628,38 @@ function TextFieldBase(props) {
   }
   const showFocus = isFocused && !inputProps.readOnly || forceFocus;
   const showHover = isHovered && !inputProps.disabled && !inputProps.readOnly && !isFocused || forceHover;
+  const fieldElementProps = (0, import_react_aria8.mergeProps)(inputProps, {
+    onBlur,
+    onFocus: onFocusChained,
+    onChange: onDomChange
+  }, {
+    "aria-invalid": Boolean(errorMsg),
+    ...labelStyle === "hidden" ? {
+      "aria-label": label
+    } : {}
+  });
+  const errorMessageProps = errorMsg ? {
+    "aria-errormessage": errorMessageId
+  } : {};
+  const fieldElementCss = {
+    ...fieldStyles.input,
+    ...inputProps.disabled ? fieldStyles.disabled : {},
+    ...showHover ? fieldStyles.hover : {},
+    ...unfocusedPlaceholder && !isFocused && {
+      position: "absolute",
+      overflow: "oh",
+      clip: "visuallyHidden_clip",
+      clipPath: "visuallyHidden_clipPath",
+      border: "visuallyHidden_border",
+      height: "visuallyHidden_height",
+      margin: "visuallyHidden_margin",
+      width: "visuallyHidden_width",
+      padding: "visuallyHidden_padding",
+      whiteSpace: "wsnw",
+      opacity: "o0"
+    },
+    ...xss
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ...(0, import_runtime26.trussProps)(fieldStyles.container), ...groupProps, ...focusWithinProps, children: [
       label && labelStyle !== "inline" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Label, { labelProps, hidden: labelStyle === "hidden" || compound, label, inline: labelStyle !== "above", suffix: labelSuffix, contrast, ...tid.label }),
@@ -8694,36 +8756,7 @@ function TextFieldBase(props) {
                   children: unfocusedPlaceholder
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ElementType, { ...(0, import_react_aria8.mergeProps)(inputProps, {
-                onBlur,
-                onFocus: onFocusChained,
-                onChange: onDomChange
-              }, {
-                "aria-invalid": Boolean(errorMsg),
-                ...labelStyle === "hidden" ? {
-                  "aria-label": label
-                } : {}
-              }), ...errorMsg ? {
-                "aria-errormessage": errorMessageId
-              } : {}, ref: fieldRef, rows: multiline ? 1 : void 0, ...(0, import_runtime26.trussProps)({
-                ...fieldStyles.input,
-                ...inputProps.disabled ? fieldStyles.disabled : {},
-                ...showHover ? fieldStyles.hover : {},
-                ...unfocusedPlaceholder && !isFocused && {
-                  position: "absolute",
-                  overflow: "oh",
-                  clip: "visuallyHidden_clip",
-                  clipPath: "visuallyHidden_clipPath",
-                  border: "visuallyHidden_border",
-                  height: "visuallyHidden_height",
-                  margin: "visuallyHidden_margin",
-                  width: "visuallyHidden_width",
-                  padding: "visuallyHidden_padding",
-                  whiteSpace: "wsnw",
-                  opacity: "o0"
-                },
-                ...xss
-              }), ...tid }),
+              multiline ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("textarea", { ...fieldElementProps, ...errorMessageProps, ref: fieldRef, rows: 1, ...(0, import_runtime26.trussProps)(fieldElementCss), ...tid }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("input", { ...fieldElementProps, ...errorMessageProps, ref: fieldRef, ...(0, import_runtime26.trussProps)(fieldElementCss), ...tid }),
               isFocused && clearable && onChange && inputProps.value && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(IconButton, { icon: "xCircle", color: "rgba(100, 100, 100, 1)" /* Gray700 */, onClick: () => {
                 onChange(void 0);
                 fieldRef.current?.focus();
@@ -22656,6 +22689,7 @@ function useToast() {
   formatValue,
   generateColumnId,
   getAlignment,
+  getColumnBorderCss,
   getDateFormat,
   getFirstOrLastCellCss,
   getJustification,