@homebound/beam 2.235.3 → 2.235.4

package/dist/components/Filters/MultiFilter.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.multiFilter = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const BaseFilter_1 = require("./BaseFilter");
+const SelectFieldBase_1 = require("../../inputs/internal/SelectFieldBase");
 const MultiSelectField_1 = require("../../inputs/MultiSelectField");
 const ToggleChipGroup_1 = require("../../inputs/ToggleChipGroup");
 const defaultTestId_1 = require("../../utils/defaultTestId");
@@ -12,11 +13,21 @@ function multiFilter(props) {
 exports.multiFilter = multiFilter;
 class MultiFilter extends BaseFilter_1.BaseFilter {
     render(value, setValue, tid, inModal, vertical) {
+        var _a;
         if (inModal && this.props.options.length > 0 && this.props.options.length <= 8) {
-            return ((0, jsx_runtime_1.jsx)(ToggleChipGroup_1.ToggleChipGroup, { label: this.label, options: this.props.options.map((o) => ({
-                    label: this.props.getOptionLabel(o),
-                    value: this.props.getOptionValue(o),
-                })), onChange: (values) => {
+            const { disabledOptions } = this.props;
+            const disabledOptionsWithReasons = Object.fromEntries((_a = disabledOptions === null || disabledOptions === void 0 ? void 0 : disabledOptions.map(SelectFieldBase_1.disabledOptionToKeyedTuple)) !== null && _a !== void 0 ? _a : []);
+            const disabledKeys = Object.keys(disabledOptionsWithReasons);
+            return ((0, jsx_runtime_1.jsx)(ToggleChipGroup_1.ToggleChipGroup, { label: this.label, options: this.props.options.map((o) => {
+                    const value = this.props.getOptionValue(o);
+                    const disabled = value && disabledKeys.includes(value.toString());
+                    const disabledReason = disabled ? disabledOptionsWithReasons[value.toString()] : undefined;
+                    return {
+                        label: this.props.getOptionLabel(o),
+                        value: value,
+                        disabled: disabledReason !== null && disabledReason !== void 0 ? disabledReason : disabled,
+                    };
+                }), onChange: (values) => {
                     setValue(values.length === 0 ? undefined : values);
                 }, values: value || [], hideLabel: true, ...tid[(0, defaultTestId_1.defaultTestId)(this.label)] }));
         }

package/dist/components/Filters/testDomain.d.ts

@@ -49,6 +49,7 @@ export type StageSingleFilter = NonNullable<FilterDefs<ProjectFilter>["stageSing
 export type DateFilter = NonNullable<FilterDefs<ProjectFilter>["date"]>;
 export type DateRangeFilter = NonNullable<FilterDefs<ProjectFilter>["dateRange"]>;
 export declare const stageFilter: StageFilter;
+export declare const stageFilterDisabledOptions: StageFilter;
 export declare const stageSingleFilter: StageSingleFilter;
 export declare const taskDueFilter: DateFilter;
 export declare const taskCompleteFilter: DateRangeFilter;

package/dist/components/Filters/testDomain.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScheduleTypes = exports.TaskStatus = exports.taskCompleteFilter = exports.taskDueFilter = exports.stageSingleFilter = exports.stageFilter = exports.Stage = void 0;
+exports.ScheduleTypes = exports.TaskStatus = exports.taskCompleteFilter = exports.taskDueFilter = exports.stageSingleFilter = exports.stageFilterDisabledOptions = exports.stageFilter = exports.Stage = void 0;
 const DateFilter_1 = require("./DateFilter");
 const DateRangeFilter_1 = require("./DateRangeFilter");
 const MultiFilter_1 = require("./MultiFilter");
@@ -19,6 +19,12 @@ exports.stageFilter = (0, MultiFilter_1.multiFilter)({
     getOptionValue: (s) => s.code,
     getOptionLabel: (s) => s.name,
 });
+exports.stageFilterDisabledOptions = (0, MultiFilter_1.multiFilter)({
+    options: stageOptions,
+    getOptionValue: (s) => s.code,
+    getOptionLabel: (s) => s.name,
+    disabledOptions: [{ value: Stage.StageOne, reason: "I have a reason to be disabled." }, Stage.StageTwo],
+});
 exports.stageSingleFilter = (0, SingleFilter_1.singleFilter)({
     options: stageOptions,
     getOptionValue: (s) => s.code,

package/dist/inputs/ToggleChipGroup.d.ts

@@ -1,6 +1,13 @@
+import { ReactNode } from "react";
 type ToggleChipItemProps = {
     label: string;
     value: string;
+    /**
+     * Whether the interactive element is disabled.
+     *
+     * If a ReactNode, it's treated as a "disabled reason" that's shown in a tooltip.
+     */
+    disabled?: boolean | ReactNode;
 };
 export interface ToggleChipGroupProps {
     label: string;

package/dist/inputs/ToggleChipGroup.js

@@ -5,6 +5,7 @@ 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 Label_1 = require("../components/Label");
 const Css_1 = require("../Css");
 const useTestIds_1 = require("../utils/useTestIds");
@@ -13,22 +14,28 @@ function ToggleChipGroup(props) {
     const state = (0, react_stately_1.useCheckboxGroupState)({ ...props, value: values });
     const { groupProps, labelProps } = (0, react_aria_1.useCheckboxGroup)(props, state);
     const tid = (0, useTestIds_1.useTestIds)(props, "toggleChip");
-    return ((0, jsx_runtime_1.jsxs)("div", { ...groupProps, css: Css_1.Css.relative.$, children: [(0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, ...labelProps, hidden: hideLabel }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.gap1.add("flexWrap", "wrap").$, children: options.map((o) => ((0, jsx_runtime_1.jsx)(ToggleChip, { value: o.value, groupState: state, selected: state.value.includes(o.value), label: o.label, ...tid[o.value] }, o.value))) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...groupProps, css: Css_1.Css.relative.$, children: [(0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, ...labelProps, hidden: hideLabel }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.gap1.add("flexWrap", "wrap").$, children: options.map((o) => ((0, jsx_runtime_1.jsx)(ToggleChip, { value: o.value, groupState: state, selected: state.value.includes(o.value), label: o.label, disabled: o.disabled, ...tid[o.value] }, o.value))) })] }));
 }
 exports.ToggleChipGroup = ToggleChipGroup;
 function ToggleChip(props) {
-    const { label, value, groupState, selected: isSelected, ...others } = props;
+    const { label, value, groupState, selected: isSelected, disabled = false, ...others } = props;
+    const isDisabled = !!disabled;
     const ref = (0, react_1.useRef)(null);
-    const { inputProps } = (0, react_aria_1.useCheckboxGroupItem)({ value, "aria-label": label }, groupState, ref);
+    const { inputProps } = (0, react_aria_1.useCheckboxGroupItem)({ value, "aria-label": label, isDisabled }, groupState, ref);
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)();
-    return ((0, jsx_runtime_1.jsxs)("label", { css: {
-            ...Css_1.Css.relative.dib.br16.sm.px1.cursorPointer.pyPx(4).bgGray200.$,
-            ...(isSelected
-                ? {
-                    ...Css_1.Css.white.bgLightBlue700.$,
-                    ":hover": Css_1.Css.bgLightBlue800.$,
-                }
-                : { ":hover": Css_1.Css.bgGray300.$ }),
-            ...(isFocusVisible ? Css_1.Css.bshFocus.$ : {}),
-        }, "data-selected": isSelected, ...others, children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ...inputProps, ...focusProps }) }), label] }));
+    const tooltip = (0, components_1.resolveTooltip)(disabled);
+    return (0, components_1.maybeTooltip)({
+        title: tooltip,
+        placement: "top",
+        children: ((0, jsx_runtime_1.jsxs)("label", { css: {
+                ...Css_1.Css.relative.dib.br16.sm.px1.cursorPointer.pyPx(4).bgGray200.if(isDisabled).cursorNotAllowed.gray600.pr1.$,
+                ...(isSelected
+                    ? {
+                        ...Css_1.Css.white.bgLightBlue700.$,
+                        ":hover:not([data-disabled='true'])": Css_1.Css.bgLightBlue800.$,
+                    }
+                    : { ":hover:not([data-disabled='true'])": Css_1.Css.bgGray300.$ }),
+                ...(isFocusVisible ? Css_1.Css.bshFocus.$ : {}),
+            }, "data-selected": isSelected, "data-disabled": isDisabled, "aria-disabled": isDisabled, ...others, children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ...inputProps, ...focusProps }) }), label] })),
+    });
 }

package/dist/inputs/internal/SelectFieldBase.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { PresentationFieldProps } from "../../components/PresentationContext";
 import { Value } from "../Value";
 import { BeamFocusableProps } from "../../interfaces";
@@ -57,4 +57,8 @@ type OptionsOrLoad<O> = O[] | {
 };
 export declare function initializeOptions<O>(options: OptionsOrLoad<O>, unsetLabel: string | undefined): OptionsOrLoad<O>;
 export declare const unsetOption: {};
+export declare function disabledOptionToKeyedTuple(disabledOption: Value | {
+    value: Value;
+    reason: string;
+}): [React.Key, string | undefined];
 export {};

package/dist/inputs/internal/SelectFieldBase.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.unsetOption = exports.initializeOptions = exports.SelectFieldBase = void 0;
+exports.disabledOptionToKeyedTuple = exports.unsetOption = exports.initializeOptions = exports.SelectFieldBase = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
@@ -279,3 +279,4 @@ function disabledOptionToKeyedTuple(disabledOption) {
         return [(0, Value_1.valueToKey)(disabledOption), undefined];
     }
 }
+exports.disabledOptionToKeyedTuple = disabledOptionToKeyedTuple;

package/package.json

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