@homebound/beam 2.325.0 → 2.325.1

package/dist/forms/BoundIconCardGroupField.d.ts

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

package/dist/inputs/IconCardGroup.d.ts

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

package/dist/inputs/IconCardGroup.js

@@ -2,8 +2,7 @@
 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 react_1 = require("react");
 const Css_1 = require("../Css");
 const Label_1 = require("../components/Label");
 const PresentationContext_1 = require("../components/PresentationContext");
@@ -11,18 +10,47 @@ const utils_1 = require("../utils");
 const IconCard_1 = require("./IconCard");
 const HelperText_1 = require("../components/HelperText");
 const ErrorMessage_1 = require("./ErrorMessage");
+const react_aria_1 = require("react-aria");
 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 { 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, onChange, } = props;
+    const [selected, setSelected] = (0, react_1.useState)(values);
+    const exclusiveOptions = (0, react_1.useMemo)(() => options.filter((o) => o.exclusive), [options]);
+    const toggleValue = (0, react_1.useCallback)((value) => {
+        if (isDisabled)
+            return;
+        const option = options.find((o) => o.value === value);
+        if (!option)
+            return;
+        let newSelected = [];
+        if (selected.includes(value)) {
+            newSelected = selected.filter((v) => v !== value);
+        }
+        else {
+            if (option.exclusive) {
+                newSelected = [value];
+            }
+            else {
+                newSelected = [...selected, value];
+                // Filter out any exclusive options as a non-exclusive option was selected.
+                newSelected = newSelected.filter((v) => !exclusiveOptions.some((o) => o.value === v));
+            }
+        }
+        setSelected(newSelected);
+        onChange(newSelected);
+    }, [exclusiveOptions, isDisabled, onChange, options, selected]);
     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 { labelProps, fieldProps: fieldPropsAria } = (0, react_aria_1.useField)(props);
+    const groupProps = (0, react_aria_1.mergeProps)(tid, {
+        role: "group",
+        "aria-disabled": isDisabled || undefined,
+        ...fieldPropsAria,
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { ...groupProps, 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));
+                    const isSelected = selected.includes(option.value);
+                    return ((0, jsx_runtime_1.jsx)(IconCard_1.IconCard, { icon: icon, label: label, selected: isSelected, disabled: disabled, onChange: () => toggleValue(option.value), ...tid[option.label] }, option.label));
                 }) }), 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/package.json

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