@homebound/beam 2.402.0 → 2.403.0

package/dist/index.d.cts

@@ -7034,11 +7034,13 @@ type ToggleChipItemProps = {
      * If a ReactNode, it's treated as a "disabled reason" that's shown in a tooltip.
      */
     disabled?: boolean | ReactNode;
+    readonly?: boolean;
 };
 interface ToggleChipGroupProps extends Pick<PresentationFieldProps, "labelStyle"> {
     label: string;
     options: ToggleChipItemProps[];
     values: string[];
+    readonly?: boolean;
     required?: boolean;
     onChange: (values: string[]) => void;
     xss?: ToggleChipXss;

package/dist/index.d.ts

@@ -7034,11 +7034,13 @@ type ToggleChipItemProps = {
      * If a ReactNode, it's treated as a "disabled reason" that's shown in a tooltip.
      */
     disabled?: boolean | ReactNode;
+    readonly?: boolean;
 };
 interface ToggleChipGroupProps extends Pick<PresentationFieldProps, "labelStyle"> {
     label: string;
     options: ToggleChipItemProps[];
     values: string[];
+    readonly?: boolean;
     required?: boolean;
     onChange: (values: string[]) => void;
     xss?: ToggleChipXss;

package/dist/index.js

@@ -12104,8 +12104,16 @@ import { jsx as jsx76, jsxs as jsxs42 } from "@emotion/react/jsx-runtime";
 function ToggleChipGroup(props) {
   const { fieldProps } = usePresentationContext();
   const { labelLeftFieldWidth = "50%" } = fieldProps ?? {};
-  const { values, label, labelStyle = fieldProps?.labelStyle ?? "above", options, required, xss } = props;
-  const state = useCheckboxGroupState2({ ...props, value: values });
+  const {
+    values,
+    label,
+    labelStyle = fieldProps?.labelStyle ?? "above",
+    options,
+    required,
+    xss,
+    readonly = false
+  } = props;
+  const state = useCheckboxGroupState2({ ...props, isReadOnly: readonly, value: values });
   const { groupProps, labelProps } = useCheckboxGroup2(props, state);
   const tid = useTestIds(props, "toggleChip");
   const labelSuffix = useLabelSuffix(required, false);
@@ -12132,6 +12140,7 @@ function ToggleChipGroup(props) {
             selected: state.value.includes(o.value),
             label: o.label,
             disabled: o.disabled,
+            readonly: o.readonly,
             startAdornment: o.startAdornment,
             xss,
             ...tid[o.value]
@@ -12143,10 +12152,21 @@ function ToggleChipGroup(props) {
   ] });
 }
 function ToggleChip2(props) {
-  const { label, value, groupState, selected: isSelected, disabled = false, startAdornment, xss, ...others } = props;
+  const {
+    label,
+    value,
+    groupState,
+    selected: isSelected,
+    disabled = false,
+    readonly = false,
+    startAdornment,
+    xss,
+    ...others
+  } = props;
   const isDisabled = !!disabled;
+  const isReadOnly = !!readonly;
   const ref = useRef34(null);
-  const { inputProps } = useCheckboxGroupItem2({ value, "aria-label": label, isDisabled }, groupState, ref);
+  const { inputProps } = useCheckboxGroupItem2({ value, "aria-label": label, isReadOnly, isDisabled }, groupState, ref);
   const { isFocusVisible, focusProps } = useFocusRing9();
   const tooltip = resolveTooltip(disabled);
   return maybeTooltip({
@@ -12160,7 +12180,7 @@ function ToggleChip2(props) {
           ...isSelected ? {
             ...Css.color(xss?.color ?? "rgba(255,255,255,1)" /* White */).bgColor(xss?.backgroundColor ?? "rgba(29, 78, 216, 1)" /* Blue700 */).$,
             ":hover:not([data-disabled='true'])": Css.bgColor(xss?.backgroundColor ?? "rgba(30, 64, 175, 1)" /* Blue800 */).$
-          } : { ":hover:not([data-disabled='true'])": Css.bgGray300.$ },
+          } : { ":hover:not([data-disabled='true'])": Css.if(!groupState.isReadOnly).bgGray300.$ },
           ...isFocusVisible ? Css.bshFocus.$ : {}
         },
         "data-selected": isSelected,