@homebound/beam 2.344.0 → 2.344.2

package/dist/components/Label.js

@@ -12,7 +12,13 @@ const src_1 = require("..");
 /** An internal helper component for rendering form labels. */
 function LabelComponent(props) {
     const { labelProps, label, hidden, suffix, contrast = false, tooltip, inline, xss, ...others } = props;
-    const labelEl = ((0, jsx_runtime_1.jsxs)("label", { ...labelProps, ...others, css: { ...Css_1.Css.dif.aic.gap1.sm.gray700.mbPx(inline ? 0 : 4).if(contrast).white.$, ...xss }, children: [label, suffix && ` ${suffix}`, tooltip && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.$, children: (0, jsx_runtime_1.jsx)(src_1.Icon, { icon: "infoCircle", tooltip: tooltip, inc: 2, color: contrast ? Css_1.Palette.White : Css_1.Palette.Gray700 }) }))] }));
+    const labelEl = ((0, jsx_runtime_1.jsxs)("label", { ...labelProps, ...others, css: {
+            ...Css_1.Css.dif.aic.gap1.sm.gray700
+                .mbPx(inline ? 0 : 4)
+                .if(contrast)
+                .white.if(!inline).asfs.$,
+            ...xss,
+        }, children: [label, suffix && ` ${suffix}`, tooltip && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.$, children: (0, jsx_runtime_1.jsx)(src_1.Icon, { icon: "infoCircle", tooltip: tooltip, inc: 2, color: contrast ? Css_1.Palette.White : Css_1.Palette.Gray700 }) }))] }));
     return hidden ? (0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: labelEl }) : labelEl;
 }
 exports.Label = react_1.default.memo(LabelComponent);

package/dist/components/Tooltip.js

@@ -18,7 +18,8 @@ function Tooltip(props) {
     const tid = (0, utils_1.useTestIds)(props, "tooltip");
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { ref: triggerRef, ...triggerProps, ...(!state.isOpen && typeof title === "string" ? { title } : {}), ...tid, 
                 // Add display contents to prevent the tooltip wrapping element from short-circuiting inherited styles (i.e. flex item positioning)
-                css: Css_1.Css.display("contents").$, 
+                // Once the element is `:active`, allow pointer events (i.e. click events) to pass through to the children.
+                css: Css_1.Css.display("contents").addIn(":active", Css_1.Css.add("pointerEvents", "none").$).$, 
                 // Adding `draggable` as a hack to allow focus to continue through this element and into its children.
                 // This is due to some code in React-Aria that prevents default due ot mobile browser inconsistencies,
                 // and the only way they don't prevent default is if the element is draggable.

package/dist/inputs/TextFieldBase.js

@@ -97,7 +97,7 @@ function TextFieldBase(props) {
     }, onFocus);
     const showFocus = (isFocused && !inputProps.readOnly) || forceFocus;
     const showHover = (isHovered && !inputProps.disabled && !inputProps.readOnly && !isFocused) || forceHover;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { css: fieldStyles.container, ...groupProps, ...focusWithinProps, children: [label && labelStyle !== "inline" && ((0, jsx_runtime_1.jsx)(Label_1.Label, { labelProps: labelProps, hidden: labelStyle === "hidden" || compound, label: label, suffix: labelSuffix, contrast: contrast, ...tid.label })), (0, components_1.maybeTooltip)({
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { css: fieldStyles.container, ...groupProps, ...focusWithinProps, children: [label && labelStyle !== "inline" && ((0, jsx_runtime_1.jsx)(Label_1.Label, { labelProps: labelProps, hidden: labelStyle === "hidden" || compound, label: label, inline: labelStyle !== "above", suffix: labelSuffix, contrast: contrast, ...tid.label })), (0, components_1.maybeTooltip)({
                         title: tooltip,
                         placement: "top",
                         children: inputProps.readOnly ? ((0, jsx_runtime_1.jsxs)("div", { css: {

package/dist/inputs/ToggleChipGroup.js

@@ -14,7 +14,7 @@ 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.df.fdc.if(labelStyle === "left").fdr.maxw100.$, 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").if(labelStyle === "left").ml2.$, 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))) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...groupProps, css: Css_1.Css.relative.df.fdc.if(labelStyle === "left").fdr.maxw100.$, children: [(0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, ...labelProps, hidden: hideLabel, inline: labelStyle === "left" }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.gap1.add("flexWrap", "wrap").if(labelStyle === "left").ml2.$, 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) {

package/package.json

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