@homebound/beam 2.122.0 → 2.122.1

package/dist/components/PresentationContext.d.ts

@@ -9,6 +9,7 @@ export interface PresentationFieldProps {
     compact?: boolean;
     typeScale?: Typography;
     visuallyDisabled?: false;
+    errorInTooltip?: true;
 }
 export declare type PresentationContextProps = {
     fieldProps?: PresentationFieldProps;

package/dist/components/Table/GridTable.js

@@ -237,6 +237,7 @@ function GridTable(props) {
         hideLabel: true,
         numberAlignment: "right",
         compact: true,
+        errorInTooltip: true,
         // Avoid passing `undefined` as it will unset existing PresentationContext settings
         ...(borderless !== undefined ? { borderless } : {}),
         ...(typeScale !== undefined ? { typeScale } : {}),

package/dist/components/Table/styles.js

@@ -66,7 +66,7 @@ exports.beamTotalsFixedStyle = {
 exports.beamFlexibleStyle = {
     ...exports.beamFixedStyle,
     cellCss: Css_1.Css.xs.bgWhite.aic.p2.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray100}`).$,
-    presentationSettings: { borderless: false, typeScale: "xs", wrap: true },
+    presentationSettings: { borderless: true, typeScale: "xs", wrap: true },
 };
 exports.beamNestedFlexibleStyle = {
     ...exports.beamFlexibleStyle,

package/dist/forms/formStateDomain.d.ts

@@ -1,6 +1,7 @@
 export declare const jan1: Date;
 export declare const jan2: Date;
 export declare const jan10: Date;
+export declare const jan29: Date;
 export declare const dd100: DeweyDecimalClassification;
 export declare const dd200: DeweyDecimalClassification;
 export interface AuthorInput {
@@ -18,6 +19,7 @@ export interface AuthorInput {
     favoriteShapes?: string[] | null;
     isAvailable?: boolean | null;
     animals?: string[] | null;
+    bio?: string | null;
 }
 export interface AuthorAddress {
     street?: string | null;

package/dist/forms/formStateDomain.js

@@ -3,10 +3,11 @@
 // by a GraphQL schema for a `saveAuthor` mutation that takes an author
 // plus the author's books.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateOnly = exports.dd200 = exports.dd100 = exports.jan10 = exports.jan2 = exports.jan1 = void 0;
+exports.DateOnly = exports.dd200 = exports.dd100 = exports.jan29 = exports.jan10 = exports.jan2 = exports.jan1 = void 0;
 exports.jan1 = new Date(2020, 0, 1);
 exports.jan2 = new Date(2020, 0, 2);
 exports.jan10 = new Date(2020, 0, 10);
+exports.jan29 = new Date(2020, 0, 29);
 exports.dd100 = { number: "100", category: "Philosophy" };
 exports.dd200 = { number: "200", category: "Religion" };
 class DateOnly {

package/dist/inputs/TextFieldBase.js

@@ -15,12 +15,13 @@ const defaultTestId_1 = require("../utils/defaultTestId");
 const useTestIds_1 = require("../utils/useTestIds");
 // Used by both TextField and TextArea
 function TextFieldBase(props) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
     const { label, required, labelProps, hideLabel = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.hideLabel) !== null && _a !== void 0 ? _a : false, inputProps, inputRef, inputWrapRef, groupProps, compact = (_b = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact) !== null && _b !== void 0 ? _b : false, errorMsg, helperText, multiline = false, onChange, onBlur, onFocus, xss, endAdornment, startAdornment, inlineLabel, contrast = false, borderless = (_c = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.borderless) !== null && _c !== void 0 ? _c : false, textAreaMinHeight = 96, clearable = false, tooltip, visuallyDisabled = (_d = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.visuallyDisabled) !== null && _d !== void 0 ? _d : true, } = props;
     const typeScale = (_e = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _e !== void 0 ? _e : "sm";
+    const errorInTooltip = (_f = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.errorInTooltip) !== null && _f !== void 0 ? _f : false;
     const internalProps = props.internalProps || {};
-    const { compound = false } = internalProps;
+    const { compound = false, forceFocus = false, forceHover = false } = internalProps;
     const errorMessageId = `${inputProps.id}-error`;
     const labelSuffix = (0, labelUtils_1.getLabelSuffix)(required);
     const ElementType = multiline ? "textarea" : "input";
@@ -51,12 +52,12 @@ function TextFieldBase(props) {
             ...Css_1.Css.gray900.if(contrast).white.$,
         },
         input: {
-            ...Css_1.Css.w100.mw0.outline0.br4.fg1.$,
+            ...Css_1.Css.w100.mw0.outline0.fg1.if(multiline).br4.$,
             // Not using Truss's inline `if` statement here because `addIn` properties do not respect the if statement.
             ...(!contrast ? Css_1.Css.bgWhite.$ : Css_1.Css.bgGray700.addIn("&::selection", Css_1.Css.bgGray800.$).$),
         },
         hover: Css_1.Css.bgGray100.if(contrast).bgGray600.bGray600.$,
-        focus: borderless ? Css_1.Css.bshFocus.z1.$ : Css_1.Css.bLightBlue700.if(contrast).bLightBlue500.$,
+        focus: Css_1.Css.bLightBlue700.if(contrast).bLightBlue500.$,
         disabled: visuallyDisabled
             ? Css_1.Css.cursorNotAllowed.gray400.bgGray100.if(contrast).gray500.bgGray700.$
             : Css_1.Css.cursorNotAllowed.$,
@@ -75,10 +76,12 @@ function TextFieldBase(props) {
     const onFocusChained = (0, react_aria_1.chain)((e) => {
         e.target.select();
     }, onFocus);
+    const showFocus = (isFocused && !inputProps.readOnly) || forceFocus;
+    const showHover = (isHovered && !inputProps.disabled && !inputProps.readOnly && !isFocused) || forceHover;
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: fieldStyles.container }, groupProps, focusWithinProps, { children: [label && !inlineLabel && (
             // set `hidden` if being rendered as a compound field
             (0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({ labelProps: labelProps, hidden: hideLabel || compound, label: label, suffix: labelSuffix, contrast: contrast }, tid.label), void 0)), (0, components_1.maybeTooltip)({
-                title: tooltip,
+                title: (errorInTooltip && errorMsg) || tooltip,
                 placement: "top",
                 children: inputProps.readOnly ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
                         // Use input wrapper to get common styles, but then we need to override some
@@ -86,19 +89,19 @@ function TextFieldBase(props) {
                         ...(multiline ? Css_1.Css.fdc.aifs.childGap2.$ : Css_1.Css.truncate.$),
                         ...xss,
                     }, "data-readonly": "true" }, tid, { children: [!multiline && inlineLabel && label && !hideLabel && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, Object.assign({ labelProps: labelProps, label: label }, tid.label), void 0)), multiline
-                            ? (_f = inputProps.value) === null || _f === void 0 ? void 0 : _f.split("\n\n").map((p, i) => ((0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.my1.$ }, { children: p.split("\n").map((sentence, j) => ((0, jsx_runtime_1.jsxs)("span", { children: [sentence, (0, jsx_runtime_1.jsx)("br", {}, void 0)] }, j))) }), i)))
+                            ? (_g = inputProps.value) === null || _g === void 0 ? void 0 : _g.split("\n\n").map((p, i) => ((0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.my1.$ }, { children: p.split("\n").map((sentence, j) => ((0, jsx_runtime_1.jsxs)("span", { children: [sentence, (0, jsx_runtime_1.jsx)("br", {}, void 0)] }, j))) }), i)))
                             : inputProps.value] }), void 0)) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
                         ...fieldStyles.inputWrapper,
                         ...(inputProps.disabled ? fieldStyles.disabled : {}),
-                        ...(isFocused && !inputProps.readOnly ? fieldStyles.focus : {}),
-                        ...(isHovered && !inputProps.disabled && !inputProps.readOnly && !isFocused ? fieldStyles.hover : {}),
+                        ...(showFocus ? fieldStyles.focus : {}),
+                        ...(showHover ? fieldStyles.hover : {}),
                         ...(errorMsg ? fieldStyles.error : {}),
                         ...Css_1.Css.if(multiline).aifs.px0.mhPx(textAreaMinHeight).$,
                     } }, hoverProps, { ref: inputWrapRef }, { children: [!multiline && inlineLabel && label && !hideLabel && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, Object.assign({ labelProps: labelProps, label: label }, tid.label), void 0)), !multiline && startAdornment && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.df.aic.fs0.br4.pr1.$ }, { children: startAdornment }), void 0), (0, jsx_runtime_1.jsx)(ElementType, Object.assign({}, (0, react_aria_1.mergeProps)(inputProps, { onBlur, onFocus: onFocusChained, onChange: onDomChange }, { "aria-invalid": Boolean(errorMsg), ...(hideLabel ? { "aria-label": label } : {}) }), (errorMsg ? { "aria-errormessage": errorMessageId } : {}), { ref: fieldRef, rows: multiline ? 1 : undefined, css: {
                                 ...fieldStyles.input,
                                 ...(inputProps.disabled ? fieldStyles.disabled : {}),
-                                ...(isHovered && !inputProps.disabled && !inputProps.readOnly && !isFocused ? fieldStyles.hover : {}),
-                                ...(multiline ? Css_1.Css.h100.p1.add("resize", "none").if(borderless).pPx(4).$ : Css_1.Css.truncate.$),
+                                ...(showHover ? fieldStyles.hover : {}),
+                                ...(multiline ? Css_1.Css.h100.p1.add("resize", "none").$ : Css_1.Css.truncate.$),
                                 ...xss,
                             } }, tid), void 0), isFocused && clearable && onChange && inputProps.value && ((0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "xCircle", color: Css_1.Palette.Gray700, onClick: () => {
                                 var _a;
@@ -106,6 +109,6 @@ function TextFieldBase(props) {
                                 // Reset focus to input element
                                 (_a = fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                             } }, void 0)), !multiline && endAdornment && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.df.aic.pl1.fs0.$ }, { children: endAdornment }), void 0)] }), void 0)),
-            }), errorMsg && !compound && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ id: errorMessageId, errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && !compound && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }), void 0));
+            }), errorMsg && !compound && !errorInTooltip && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ id: errorMessageId, errorMsg: errorMsg }, tid.errorMsg), void 0)), helperText && !compound && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }), void 0));
 }
 exports.TextFieldBase = TextFieldBase;

package/dist/interfaces.d.ts

@@ -52,4 +52,8 @@ export interface TextFieldInternalProps {
      * This is explicitly an internal property that is not exposed to any field's API.
      */
     compound?: boolean;
+    /** Forces focus styles for storybook purposes */
+    forceFocus?: true;
+    /** Forces hover styles for storybook purposes */
+    forceHover?: boolean;
 }

package/package.json

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