@homebound/beam 2.322.0 → 2.324.0

package/dist/forms/BoundIconCardField.d.ts

@@ -0,0 +1,12 @@
+import { FieldState } from "@homebound/form-state";
+import { IconCardProps } from "../inputs";
+import { IconProps } from "../components";
+export type BoundIconCardFieldProps = Omit<IconCardProps, "label" | "selected" | "onChange"> & {
+    field: FieldState<boolean | null | undefined>;
+    icon: IconProps["icon"];
+    /** Make optional so that callers can override if they want to. */
+    onChange?: (values: boolean) => void;
+    label?: string;
+};
+/** Wraps `IconCard` and binds it to a form field. */
+export declare function BoundIconCardField(props: BoundIconCardFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/forms/BoundIconCardField.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BoundIconCardField = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const inputs_1 = require("../inputs");
+const defaultLabel_1 = require("../utils/defaultLabel");
+const utils_1 = require("../utils");
+const mobx_react_1 = require("mobx-react");
+/** Wraps `IconCard` and binds it to a form field. */
+function BoundIconCardField(props) {
+    const { icon, field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), ...others } = props;
+    const testId = (0, utils_1.useTestIds)(props, field.key);
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
+            var _a;
+            return ((0, jsx_runtime_1.jsx)(inputs_1.IconCard, { icon: icon, label: label, selected: (_a = field.value) !== null && _a !== void 0 ? _a : false, onChange: (selected) => {
+                    // We are triggering blur manually for checkbox fields due to its transactional nature
+                    onChange(selected);
+                    field.maybeAutoSave();
+                }, disabled: field.readOnly, ...testId, ...others }));
+        } }));
+}
+exports.BoundIconCardField = BoundIconCardField;

package/dist/forms/BoundIconCardGroupField.d.ts

@@ -0,0 +1,10 @@
+import { FieldState } from "@homebound/form-state";
+import { IconCardGroupProps } from "../inputs/IconCardGroup";
+export type BoundIconCardGroupFieldProps = Omit<IconCardGroupProps, "label" | "values" | "onChange"> & {
+    field: FieldState<string[] | null | undefined>;
+    /** Make optional so that callers can override if they want to. */
+    onChange?: (values: string[]) => void;
+    label?: string;
+};
+/** Wraps `IconCardGroup` and binds it to a form field. */
+export declare function BoundIconCardGroupField(props: BoundIconCardGroupFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/forms/BoundIconCardGroupField.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BoundIconCardGroupField = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_1 = require("mobx-react");
+const IconCardGroup_1 = require("../inputs/IconCardGroup");
+const utils_1 = require("../utils");
+const defaultLabel_1 = require("../utils/defaultLabel");
+/** Wraps `IconCardGroup` and binds it to a form field. */
+function BoundIconCardGroupField(props) {
+    const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), ...others } = props;
+    const testId = (0, utils_1.useTestIds)(props, field.key);
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(IconCardGroup_1.IconCardGroup, { label: label, values: field.value || [], onChange: (values) => {
+                // We are triggering blur manually for checkbox fields due to its transactional nature
+                onChange(values);
+                field.maybeAutoSave();
+            }, disabled: field.readOnly, ...testId, ...others })) }));
+}
+exports.BoundIconCardGroupField = BoundIconCardGroupField;

package/dist/forms/index.d.ts

@@ -15,6 +15,8 @@ export * from "./BoundTextAreaField";
 export * from "./BoundTextField";
 export * from "./BoundToggleChipGroupField";
 export * from "./BoundTreeSelectField";
+export * from "./BoundIconCardField";
+export * from "./BoundIconCardGroupField";
 export * from "./FormHeading";
 export * from "./FormLines";
 export * from "./StaticField";

package/dist/forms/index.js

@@ -31,6 +31,8 @@ __exportStar(require("./BoundTextAreaField"), exports);
 __exportStar(require("./BoundTextField"), exports);
 __exportStar(require("./BoundToggleChipGroupField"), exports);
 __exportStar(require("./BoundTreeSelectField"), exports);
+__exportStar(require("./BoundIconCardField"), exports);
+__exportStar(require("./BoundIconCardGroupField"), exports);
 __exportStar(require("./FormHeading"), exports);
 __exportStar(require("./FormLines"), exports);
 __exportStar(require("./StaticField"), exports);

package/dist/inputs/IconCard.d.ts

@@ -0,0 +1,24 @@
+import { RefObject } from "react";
+import { IconProps } from "../components";
+export interface IconCardProps {
+    /** The icon to use within the card. */
+    icon: IconProps["icon"];
+    label: string;
+    selected?: boolean;
+    /** Handler that is called when the element's selection state changes. */
+    onChange?: (selected: boolean) => void;
+    cardRef?: RefObject<HTMLInputElement>;
+    disabled?: boolean;
+    tooltip?: string;
+}
+export declare function IconCard(props: IconCardProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const selectedStyles: {
+    borderWidth: import("csstype").Property.BorderWidth<string | 0> | undefined;
+} & {
+    borderColor: import("csstype").Property.BorderColor | undefined;
+} & {
+    backgroundColor: import("csstype").Property.BackgroundColor | undefined;
+};
+export declare const iconCardStylesHover: {
+    backgroundColor: import("csstype").Property.BackgroundColor | undefined;
+};

package/dist/inputs/IconCard.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iconCardStylesHover = exports.selectedStyles = exports.IconCard = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const react_aria_1 = require("react-aria");
+const react_stately_1 = require("react-stately");
+const components_1 = require("../components");
+const Css_1 = require("../Css");
+const useGetRef_1 = require("../hooks/useGetRef");
+const utils_1 = require("../utils");
+const defaultTestId_1 = require("../utils/defaultTestId");
+function IconCard(props) {
+    const { selected: isSelected = false, disabled: isDisabled = false, icon, cardRef, label, tooltip, ...otherProps } = props;
+    const ref = (0, useGetRef_1.useGetRef)(cardRef);
+    const ariaProps = { isSelected, isDisabled, ...otherProps };
+    const checkboxProps = { ...ariaProps, "aria-label": label };
+    const { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled });
+    const toggleState = (0, react_stately_1.useToggleState)(ariaProps);
+    const { inputProps } = (0, react_aria_1.useCheckbox)(checkboxProps, toggleState, ref);
+    const styles = (0, react_1.useMemo)(() => ({
+        ...baseStyles,
+        ...(isHovered && exports.iconCardStylesHover),
+        ...(isSelected && exports.selectedStyles),
+        ...(isDisabled && disabledStyles),
+    }), [isDisabled, isHovered, isSelected]);
+    const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
+    return (0, components_1.maybeTooltip)({
+        title: (0, components_1.resolveTooltip)(isDisabled, tooltip),
+        placement: "top",
+        children: ((0, jsx_runtime_1.jsxs)("button", { css: styles, ...hoverProps, onClick: toggleState.toggle, disabled: isDisabled, ...tid, children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ref: ref, ...inputProps, ...tid.value }) }), (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: icon, inc: 4, color: isDisabled ? Css_1.Palette.Gray300 : Css_1.Palette.Gray900 }), (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.xsMd.if(isDisabled).gray300.$, children: label })] })),
+    });
+}
+exports.IconCard = IconCard;
+const baseStyles = Css_1.Css.df.fdc.aic.jcc.wPx(130).hPx(114).ba.br8.bGray300.bgWhite.gap("12px").p2.tc.$;
+exports.selectedStyles = Css_1.Css.bw2.bBlue500.bgBlue50.$;
+const disabledStyles = Css_1.Css.bGray200.bgGray50.$;
+exports.iconCardStylesHover = Css_1.Css.bgGray100.$;

package/dist/inputs/IconCardGroup.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+import { IconProps } from "../components/Icon";
+import { PresentationFieldProps } from "../components/PresentationContext";
+export interface IconCardGroupItemOption {
+    icon: IconProps["icon"];
+    label: string;
+    disabled?: boolean;
+    /** The value of the IconCardGroup item, stored in value array in state. */
+    value: string;
+}
+export interface IconCardGroupProps extends Pick<PresentationFieldProps, "labelStyle"> {
+    label: string;
+    /** Called when a card is selected */
+    onChange: (values: string[]) => void;
+    /** Options for the cards contained within the IconCardGroup. */
+    options: IconCardGroupItemOption[];
+    /** The values currently selected. */
+    values: string[];
+    errorMsg?: string;
+    helperText?: string | ReactNode;
+    disabled?: boolean;
+}
+export declare function IconCardGroup(props: IconCardGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/IconCardGroup.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconCardGroup = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_aria_1 = require("react-aria");
+const react_stately_1 = require("react-stately");
+const Css_1 = require("../Css");
+const Label_1 = require("../components/Label");
+const PresentationContext_1 = require("../components/PresentationContext");
+const utils_1 = require("../utils");
+const IconCard_1 = require("./IconCard");
+const HelperText_1 = require("../components/HelperText");
+const ErrorMessage_1 = require("./ErrorMessage");
+function IconCardGroup(props) {
+    var _a;
+    const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
+    const { options, label, labelStyle = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.labelStyle) !== null && _a !== void 0 ? _a : "above", values, errorMsg, helperText, disabled: isDisabled = false, } = props;
+    const state = (0, react_stately_1.useCheckboxGroupState)({ ...props, isDisabled, value: values });
+    const { groupProps, labelProps } = (0, react_aria_1.useCheckboxGroup)(props, state);
+    const tid = (0, utils_1.useTestIds)(props);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...groupProps, ...tid, children: [labelStyle !== "hidden" && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.if(labelStyle === "left").w50.$, children: (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, ...labelProps, ...tid.label }) })), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.gap2.add({ flexWrap: "wrap" }).$, children: options.map((option) => {
+                    const { icon, label, disabled } = option;
+                    const isSelected = state.isSelected(option.value);
+                    const isDisabled = disabled || state.isDisabled;
+                    return ((0, jsx_runtime_1.jsx)(IconCard_1.IconCard, { icon: icon, label: label, selected: isSelected, disabled: isDisabled, onChange: () => state.toggleValue(option.value), ...tid[option.value] }, option.value));
+                }) }), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { errorMsg: errorMsg, ...tid.errorMsg }), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { helperText: helperText, ...tid.helperText })] }));
+}
+exports.IconCardGroup = IconCardGroup;

package/dist/inputs/RichTextField.d.ts

@@ -20,6 +20,8 @@ export interface RichTextFieldProps {
     onFocus?: () => void;
     /** For rendering formatted text */
     readOnly?: boolean;
+    /** Will set width to: 100% */
+    fullWidth?: boolean;
 }
 /**
  * Provides a simple rich text editor based on trix.

package/dist/inputs/RichTextField.js

@@ -23,7 +23,7 @@ require("trix/dist/trix.css");
  * We also integrate [tributejs]{@link https://github.com/zurb/tribute} for @ mentions.
  */
 function RichTextField(props) {
-    const { mergeTags, label, value = "", onChange, onBlur = utils_1.noop, onFocus = utils_1.noop, readOnly } = props;
+    const { mergeTags, label, value = "", onChange, onBlur = utils_1.noop, onFocus = utils_1.noop, readOnly, fullWidth } = props;
     // We get a reference to the Editor instance after trix-init fires
     const [editor, setEditor] = (0, react_2.useState)();
     const editorElement = (0, react_2.useRef)();
@@ -98,7 +98,7 @@ function RichTextField(props) {
     }, [value, readOnly, editor]);
     const { placeholder, autoFocus } = props;
     if (!readOnly) {
-        return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.w100.maxw("550px").$, children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { labelProps: {}, label: label }), (0, jsx_runtime_1.jsxs)("div", { css: { ...Css_1.Css.br4.bgWhite.$, ...trixCssOverrides }, children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", id: `input-${id}`, value: value }), (0, react_2.createElement)("trix-editor", {
+        return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.w100.if(!fullWidth).maxw("550px").$, children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { labelProps: {}, label: label }), (0, jsx_runtime_1.jsxs)("div", { css: { ...Css_1.Css.br4.bgWhite.$, ...trixCssOverrides }, children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", id: `input-${id}`, value: value }), (0, react_2.createElement)("trix-editor", {
                             id: id,
                             input: `input-${id}`,
                             // Autofocus attribute is case sensitive since this is standard HTML
@@ -107,7 +107,7 @@ function RichTextField(props) {
                         })] }), (0, jsx_runtime_1.jsx)(react_1.Global, { styles: [tributeOverrides] })] }));
     }
     else {
-        return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.w100.maxw("550px").$, children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mh("120px").bgWhite.sm.gray900.bn.p1.br4.bGray300.ba.$, dangerouslySetInnerHTML: { __html: dompurify_1.default.sanitize(value) || placeholder || "" }, "data-readonly": "true" })] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.w100.if(!fullWidth).maxw("550px").$, children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mh("120px").bgWhite.sm.gray900.bn.p1.br4.bGray300.ba.$, dangerouslySetInnerHTML: { __html: dompurify_1.default.sanitize(value) || placeholder || "" }, "data-readonly": "true" })] }));
     }
 }
 exports.RichTextField = RichTextField;

package/dist/inputs/index.d.ts

@@ -18,4 +18,5 @@ export type { TextFieldApi } from "./TextField";
 export * from "./ToggleButton";
 export * from "./ToggleChipGroup";
 export * from "./TreeSelectField";
+export * from "./IconCard";
 export type { Value } from "./Value";

package/dist/inputs/index.js

@@ -33,3 +33,4 @@ __exportStar(require("./TextField"), exports);
 __exportStar(require("./ToggleButton"), exports);
 __exportStar(require("./ToggleChipGroup"), exports);
 __exportStar(require("./TreeSelectField"), exports);
+__exportStar(require("./IconCard"), exports);

package/package.json

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