@homebound/beam 2.146.0 → 2.146.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -9,13 +9,12 @@ const DatePicker_1 = require("./internal/DatePicker/DatePicker");
9
9
  const DatePickerOverlay_1 = require("./internal/DatePicker/DatePickerOverlay");
10
10
  const OverlayTrigger_1 = require("./internal/OverlayTrigger");
11
11
  const utils_1 = require("../utils");
12
- const defaultTestId_1 = require("../utils/defaultTestId");
13
12
  function ButtonDatePicker(props) {
14
13
  const { defaultOpen, disabled, trigger, onSelect, ...datePickerProps } = props;
15
14
  const state = (0, react_stately_1.useMenuTriggerState)({ isOpen: defaultOpen });
16
15
  const buttonRef = (0, react_1.useRef)(null);
17
16
  const { menuTriggerProps, menuProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
18
- const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? (0, defaultTestId_1.defaultTestId)(trigger.label) : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
17
+ const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? trigger.label : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
19
18
  return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, Object.assign({}, props, { menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef }, tid, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ overlayProps: menuProps }, { children: (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, Object.assign({}, datePickerProps, { onSelect: (d) => {
20
19
  onSelect(d);
21
20
  state.close();
@@ -89,5 +89,5 @@ exports.Icons = {
89
89
  templates: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M20 2H10C8.897 2 8 2.897 8 4V8H4C2.897 8 2 8.897 2 10V20C2 21.103 2.897 22 4 22H14C15.103 22 16 21.103 16 20V16H20C21.103 16 22 15.103 22 14V4C22 2.897 21.103 2 20 2ZM4 20V10H14L14.002 20H4ZM20 14H16V10C16 8.897 15.103 8 14 8H10V4H20V14Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M6 12H12V14H6V12ZM6 16H12V18H6V16Z" }, void 0)] }, void 0)),
90
90
  tradePartners: ((0, jsx_runtime_1.jsx)("path", { d: "M5.12204 21C5.50004 21.378 6.00204 21.586 6.53604 21.586C7.07004 21.586 7.57204 21.378 7.95004 21L12.286 16.664C13.002 16.885 13.745 16.997 14.503 16.997C16.506 16.997 18.39 16.218 19.805 14.802C21.951 12.655 22.592 9.453 21.437 6.644L20.867 5.256L16.623 9.499L14.502 7.377L18.745 3.134L17.356 2.563C16.446 2.189 15.485 2 14.499 2C12.496 2 10.613 2.78 9.19804 4.196C7.21304 6.18 6.51604 9.068 7.33604 11.714L3.00004 16.05C2.22004 16.829 2.22004 18.099 3.00004 18.878L5.12204 21ZM9.67004 12.209L9.41604 11.593C8.56804 9.532 9.03804 7.183 10.612 5.61C11.65 4.572 13.03 4 14.499 4C14.676 4 14.851 4.008 15.025 4.025L11.672 7.378L16.621 12.328L19.976 8.973C20.132 10.581 19.573 12.204 18.389 13.389C16.839 14.939 14.425 15.416 12.405 14.585L11.79 14.33L6.53604 19.586H6.53704L6.53604 20.586V19.586L4.41404 17.464L9.67004 12.209Z" }, void 0)),
91
91
  buildingHouse: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M19.0002 2.00002H9.00019C7.89719 2.00002 7.00019 2.89702 7.00019 4.00002V9.58602L2.29319 14.293C2.00719 14.579 1.92119 15.009 2.07619 15.383C2.23119 15.757 2.59619 16 3.00019 16V17V21C3.00019 21.553 3.44819 22 4.00019 22H12.0002H20.0002C20.5532 22 21.0002 21.553 21.0002 21V4.00002C21.0002 2.89702 20.1032 2.00002 19.0002 2.00002ZM11.0002 20H5.00019V17V15V14.414L8.00019 11.414L11.0002 14.414V15V18V20ZM19.0002 20H13.0002V18V16C13.4042 16 13.7702 15.757 13.9242 15.383C14.0792 15.009 13.9932 14.579 13.7072 14.293L9.00019 9.58602V4.00002H19.0002V20Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M11 6.00002H13V8.00002H11V6.00002ZM15 6.00002H17V8.00002H15V6.00002ZM15 10.031H17V12H15V10.031ZM15 14H17V16H15V14ZM7 15H9V17H7V15Z" }, void 0)] }, void 0)),
92
- house: ((0, jsx_runtime_1.jsx)("path", { d: "M5.00299 22H9.00299H15.003H19.003C20.106 22 21.003 21.103 21.003 20V11C21.003 10.735 20.898 10.48 20.71 10.293L12.71 2.29301C12.319 1.90201 11.687 1.90201 11.296 2.29301L3.29599 10.293C3.10799 10.48 3.00299 10.735 3.00299 11V20C3.00299 21.103 3.89999 22 5.00299 22ZM10.003 20V15H14.003V20H10.003ZM5.00299 11.414L12.003 4.41401L19.003 11.414L19.004 20H16.003V15C16.003 13.897 15.106 13 14.003 13H10.003C8.89999 13 8.00299 13.897 8.00299 15V20H5.00299V11.414Z" }, void 0))
92
+ house: ((0, jsx_runtime_1.jsx)("path", { d: "M5.00299 22H9.00299H15.003H19.003C20.106 22 21.003 21.103 21.003 20V11C21.003 10.735 20.898 10.48 20.71 10.293L12.71 2.29301C12.319 1.90201 11.687 1.90201 11.296 2.29301L3.29599 10.293C3.10799 10.48 3.00299 10.735 3.00299 11V20C3.00299 21.103 3.89999 22 5.00299 22ZM10.003 20V15H14.003V20H10.003ZM5.00299 11.414L12.003 4.41401L19.003 11.414L19.004 20H16.003V15C16.003 13.897 15.106 13 14.003 13H10.003C8.89999 13 8.00299 13.897 8.00299 15V20H5.00299V11.414Z" }, void 0)),
93
93
  };
@@ -64,5 +64,5 @@ const navLinkVariantStyles = (contrast) => ({
64
64
  focusRingStyles: Css_1.Css.gray500.bgGray900.add("boxShadow", `0px 1px 2px rgba(0, 0, 0, 0.05), 0px 0px 0px 2px #242424, 0px 0px 0px 4px #0EA5E9`).$,
65
65
  hoverStyles: Css_1.Css.gray500.bgGray900.$,
66
66
  pressedStyles: Css_1.Css.gray500.bgGray700.$,
67
- }
67
+ },
68
68
  });
@@ -821,6 +821,5 @@ function filterRows(api, columns, rows, filter) {
821
821
  return acc;
822
822
  }
823
823
  }
824
- ;
825
824
  return rows.reduce(filterFn, []);
826
825
  }
@@ -2,7 +2,7 @@
2
2
  /* Modified by Beam (40 -> 32) */
3
3
  --rdp-cell-size: 32px;
4
4
  /* Modified by Beam (#0000ff -> LightBlue700) */
5
- --rdp-accent-color: rgba(3,105,161,1);
5
+ --rdp-accent-color: rgba(3, 105, 161, 1);
6
6
  --rdp-background-color: #e7edff;
7
7
  /* Switch to dark colors for dark themes */
8
8
  --rdp-accent-color-dark: #3003e1;
@@ -11,7 +11,7 @@
11
11
  --rdp-outline: 2px solid var(--rdp-accent-color);
12
12
  /* Outline border for focused and selected elements */
13
13
  /* Modified by Beam (rgba(0, 0, 0, 0.75) -> LightBlue700) */
14
- --rdp-outline-selected: 2px solid rgba(3,105,161,1);
14
+ --rdp-outline-selected: 2px solid rgba(3, 105, 161, 1);
15
15
  }
16
16
 
17
17
  /* Added in By Beam */
@@ -64,12 +64,12 @@
64
64
  border: 2px solid transparent;
65
65
  }
66
66
 
67
- .rdp-button[aria-disabled='true'] {
67
+ .rdp-button[aria-disabled="true"] {
68
68
  opacity: 0.25;
69
69
  pointer-events: none;
70
70
  }
71
71
 
72
- .rdp-button:not([aria-disabled='true']) {
72
+ .rdp-button:not([aria-disabled="true"]) {
73
73
  cursor: pointer;
74
74
  }
75
75
 
@@ -80,7 +80,7 @@
80
80
  background-color: var(--rdp-background-color);
81
81
  }
82
82
 
83
- .rdp-button:hover:not([aria-disabled='true']) {
83
+ .rdp-button:hover:not([aria-disabled="true"]) {
84
84
  background-color: var(--rdp-background-color);
85
85
  }
86
86
 
@@ -279,34 +279,34 @@
279
279
  font-weight: bold;
280
280
  }
281
281
 
282
- .rdp-day_selected:not([aria-disabled='true']),
283
- .rdp-day_selected:focus:not([aria-disabled='true']),
284
- .rdp-day_selected:active:not([aria-disabled='true']),
285
- .rdp-day_selected:hover:not([aria-disabled='true']) {
282
+ .rdp-day_selected:not([aria-disabled="true"]),
283
+ .rdp-day_selected:focus:not([aria-disabled="true"]),
284
+ .rdp-day_selected:active:not([aria-disabled="true"]),
285
+ .rdp-day_selected:hover:not([aria-disabled="true"]) {
286
286
  color: white;
287
287
  background-color: var(--rdp-accent-color);
288
288
  }
289
289
 
290
- .rdp-day_selected:focus:not([aria-disabled='true']) {
290
+ .rdp-day_selected:focus:not([aria-disabled="true"]) {
291
291
  border: var(--rdp-outline-selected);
292
292
  }
293
293
 
294
- .rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {
294
+ .rdp:not([dir="rtl"]) .rdp-day_range_start:not(.rdp-day_range_end) {
295
295
  border-top-right-radius: 0;
296
296
  border-bottom-right-radius: 0;
297
297
  }
298
298
 
299
- .rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {
299
+ .rdp:not([dir="rtl"]) .rdp-day_range_end:not(.rdp-day_range_start) {
300
300
  border-top-left-radius: 0;
301
301
  border-bottom-left-radius: 0;
302
302
  }
303
303
 
304
- .rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {
304
+ .rdp[dir="rtl"] .rdp-day_range_start:not(.rdp-day_range_end) {
305
305
  border-top-left-radius: 0;
306
306
  border-bottom-left-radius: 0;
307
307
  }
308
308
 
309
- .rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {
309
+ .rdp[dir="rtl"] .rdp-day_range_end:not(.rdp-day_range_start) {
310
310
  border-top-right-radius: 0;
311
311
  border-bottom-right-radius: 0;
312
312
  }
@@ -9,7 +9,7 @@ const defaultLabel_1 = require("../utils/defaultLabel");
9
9
  /** Wraps `Checkbox` and binds it to a form field. */
10
10
  function BoundCheckboxField(props) {
11
11
  const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onFocus, onBlur, ...others } = props;
12
- const testId = (0, utils_1.useTestIds)(props, field.key);
12
+ const testId = (0, utils_1.useTestIds)(props, label);
13
13
  return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
14
14
  var _a;
15
15
  return ((0, jsx_runtime_1.jsx)(inputs_1.Checkbox, Object.assign({ label: label, selected: (_a = field.value) !== null && _a !== void 0 ? _a : false, onChange: (selected) => {
@@ -5,12 +5,11 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
5
5
  const mobx_react_1 = require("mobx-react");
6
6
  const inputs_1 = require("../inputs");
7
7
  const utils_1 = require("../utils");
8
- const defaultLabel_1 = require("../utils/defaultLabel");
9
8
  /** Wraps `CheckboxGroup` and binds it to a form field.
10
9
  * To make the field agnostic to the order of selected values, add `strictOrder: false` to the field's ObjectConfig */
11
10
  function BoundCheckboxGroupField(props) {
12
- const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, ...others } = props;
13
- const testId = (0, utils_1.useTestIds)(props, field.key);
11
+ const { field, onChange = (value) => field.set(value), label = (0, utils_1.defaultLabel)(field.key), onBlur, onFocus, ...others } = props;
12
+ const testId = (0, utils_1.useTestIds)(props, label);
14
13
  return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.CheckboxGroup, Object.assign({ label: label, values: field.value || [], onChange: (values) => {
15
14
  onChange(values);
16
15
  field.maybeAutoSave();
@@ -10,7 +10,7 @@ function BoundChipSelectField(props) {
10
10
  const { field, getOptionValue = (opt) => opt.id, // if unset, assume O implements HasId
11
11
  getOptionLabel = (opt) => opt.name, // if unset, assume O implements HasName
12
12
  onSelect = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, onCreateNew, ...others } = props;
13
- const testId = (0, utils_1.useTestIds)(props, field.key);
13
+ const testId = (0, utils_1.useTestIds)(props, label);
14
14
  return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
15
15
  var _a;
16
16
  return ((0, jsx_runtime_1.jsx)(ChipSelectField_1.ChipSelectField, Object.assign({ label: label, value: (_a = field.value) !== null && _a !== void 0 ? _a : undefined, onSelect: (value) => {
@@ -9,7 +9,7 @@ const defaultLabel_1 = require("../utils/defaultLabel");
9
9
  /** Wraps `TextField` and binds it to a form field. */
10
10
  function BoundDateField(props) {
11
11
  const { field, readOnly, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, onEnter, ...others } = props;
12
- const testId = (0, utils_1.useTestIds)(props, field.key);
12
+ const testId = (0, utils_1.useTestIds)(props, label);
13
13
  return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.DateField, Object.assign({ label: label, value: field.value || undefined, onChange: (value) => {
14
14
  onChange(value);
15
15
  field.maybeAutoSave();
@@ -5,11 +5,10 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
5
5
  const mobx_react_1 = require("mobx-react");
6
6
  const inputs_1 = require("../inputs");
7
7
  const utils_1 = require("../utils");
8
- const defaultLabel_1 = require("../utils/defaultLabel");
9
8
  /** Wraps `TextField` and binds it to a form field. */
10
9
  function BoundDateRangeField(props) {
11
- const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, onEnter, ...others } = props;
12
- const testId = (0, utils_1.useTestIds)(props, field.key);
10
+ const { field, onChange = (value) => field.set(value), label = (0, utils_1.defaultLabel)(field.key), onBlur, onFocus, onEnter, ...others } = props;
11
+ const testId = (0, utils_1.useTestIds)(props, label);
13
12
  return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.DateRangeField, Object.assign({ label: label, value: field.value || undefined, onChange: (value) => {
14
13
  onChange(value);
15
14
  field.maybeAutoSave();
@@ -5,13 +5,11 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
5
5
  const mobx_react_1 = require("mobx-react");
6
6
  const inputs_1 = require("../inputs");
7
7
  const utils_1 = require("../utils");
8
- const defaultLabel_1 = require("../utils/defaultLabel");
9
- const useTestIds_1 = require("../utils/useTestIds");
10
8
  function BoundMultiSelectField(props) {
11
9
  const { field, options, readOnly, getOptionValue = (opt) => opt.id, // if unset, assume O implements HasId
12
10
  getOptionLabel = (opt) => opt.name, // if unset, assume O implements HasName
13
- onSelect = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, ...others } = props;
14
- const testId = (0, useTestIds_1.useTestIds)(props, field.key);
11
+ onSelect = (value) => field.set(value), label = (0, utils_1.defaultLabel)(field.key), onBlur, onFocus, ...others } = props;
12
+ const testId = (0, utils_1.useTestIds)(props, label);
15
13
  return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
16
14
  var _a;
17
15
  return ((0, jsx_runtime_1.jsx)(inputs_1.MultiSelectField, Object.assign({ label: label, values: (_a = field.value) !== null && _a !== void 0 ? _a : [], onSelect: (values, options) => {
@@ -5,11 +5,10 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
5
5
  const mobx_react_1 = require("mobx-react");
6
6
  const inputs_1 = require("../inputs");
7
7
  const utils_1 = require("../utils");
8
- const defaultLabel_1 = require("../utils/defaultLabel");
9
8
  /** Wraps `TextField` and binds it to a form field. */
10
9
  function BoundRadioGroupField(props) {
11
- const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, ...others } = props;
12
- const testId = (0, utils_1.useTestIds)(props, field.key);
10
+ const { field, onChange = (value) => field.set(value), label = (0, utils_1.defaultLabel)(field.key), onBlur, onFocus, ...others } = props;
11
+ const testId = (0, utils_1.useTestIds)(props, label);
13
12
  return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.RadioGroupField, Object.assign({ label: label, value: field.value || undefined, onChange: (value) => {
14
13
  onChange(value);
15
14
  field.maybeAutoSave();
@@ -5,11 +5,10 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
5
5
  const mobx_react_1 = require("mobx-react");
6
6
  const RichTextField_1 = require("../inputs/RichTextField");
7
7
  const utils_1 = require("../utils");
8
- const defaultLabel_1 = require("../utils/defaultLabel");
9
8
  /** Wraps `RichTextField` and binds it to a form field. */
10
9
  function BoundRichTextField(props) {
11
- const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), readOnly, onFocus, onBlur, ...others } = props;
12
- const testId = (0, utils_1.useTestIds)(props, field.key);
10
+ const { field, onChange = (value) => field.set(value), label = (0, utils_1.defaultLabel)(field.key), readOnly, onFocus, onBlur, ...others } = props;
11
+ const testId = (0, utils_1.useTestIds)(props, label);
13
12
  return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(RichTextField_1.RichTextField, Object.assign({ label: label, value: field.value || undefined, onChange: onChange,
14
13
  // TODO: Potentially support this in the future?
15
14
  // errorMsg={field.touched ? field.errors.join(" ") : undefined}
@@ -5,13 +5,11 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
5
5
  const mobx_react_1 = require("mobx-react");
6
6
  const inputs_1 = require("../inputs");
7
7
  const utils_1 = require("../utils");
8
- const defaultLabel_1 = require("../utils/defaultLabel");
9
- const useTestIds_1 = require("../utils/useTestIds");
10
8
  function BoundSelectField(props) {
11
9
  const { field, options, readOnly, getOptionValue = (opt) => opt.id, // if unset, assume O implements HasId
12
10
  getOptionLabel = (opt) => opt.name, // if unset, assume O implements HasName
13
- onSelect = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, ...others } = props;
14
- const testId = (0, useTestIds_1.useTestIds)(props, field.key);
11
+ onSelect = (value) => field.set(value), label = (0, utils_1.defaultLabel)(field.key), onBlur, onFocus, ...others } = props;
12
+ const testId = (0, utils_1.useTestIds)(props, label);
15
13
  return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
16
14
  var _a;
17
15
  return ((0, jsx_runtime_1.jsx)(inputs_1.SelectField, Object.assign({ label: label, value: (_a = field.value) !== null && _a !== void 0 ? _a : undefined, onSelect: (value, opt) => {
@@ -5,11 +5,10 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
5
5
  const mobx_react_1 = require("mobx-react");
6
6
  const inputs_1 = require("../inputs");
7
7
  const utils_1 = require("../utils");
8
- const defaultLabel_1 = require("../utils/defaultLabel");
9
8
  /** Wraps `Switch` and binds it to a form field. */
10
9
  function BoundSwitchField(props) {
11
- const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), labelStyle = "form", ...others } = props;
12
- const testId = (0, utils_1.useTestIds)(props, field.key);
10
+ const { field, onChange = (value) => field.set(value), label = (0, utils_1.defaultLabel)(field.key), labelStyle = "form", ...others } = props;
11
+ const testId = (0, utils_1.useTestIds)(props, label);
13
12
  return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
14
13
  var _a;
15
14
  return ((0, jsx_runtime_1.jsx)(inputs_1.Switch, Object.assign({ label: label, labelStyle: labelStyle, selected: (_a = field.value) !== null && _a !== void 0 ? _a : false, onChange: (selected) => {
@@ -5,11 +5,10 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
5
5
  const mobx_react_1 = require("mobx-react");
6
6
  const inputs_1 = require("../inputs");
7
7
  const utils_1 = require("../utils");
8
- const defaultLabel_1 = require("../utils/defaultLabel");
9
8
  /** Wraps `TextAreaField` and binds it to a form field. */
10
9
  function BoundTextAreaField(props) {
11
- const { field, readOnly, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onFocus, onBlur, onEnter, ...others } = props;
12
- const testId = (0, utils_1.useTestIds)(props, field.key);
10
+ const { field, readOnly, onChange = (value) => field.set(value), label = (0, utils_1.defaultLabel)(field.key), onFocus, onBlur, onEnter, ...others } = props;
11
+ const testId = (0, utils_1.useTestIds)(props, label);
13
12
  return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.TextAreaField, Object.assign({ label: label, value: field.value || undefined, onChange: onChange, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, onBlur: () => {
14
13
  field.blur();
15
14
  (0, utils_1.maybeCall)(onBlur);
@@ -5,11 +5,10 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
5
5
  const mobx_react_1 = require("mobx-react");
6
6
  const inputs_1 = require("../inputs");
7
7
  const utils_1 = require("../utils");
8
- const defaultLabel_1 = require("../utils/defaultLabel");
9
8
  /** Wraps `TextField` and binds it to a form field. */
10
9
  function BoundTextField(props) {
11
- const { field, readOnly, onBlur, onFocus, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onEnter, ...others } = props;
12
- const testId = (0, utils_1.useTestIds)(props, field.key);
10
+ const { field, readOnly, onBlur, onFocus, onChange = (value) => field.set(value), label = (0, utils_1.defaultLabel)(field.key), onEnter, ...others } = props;
11
+ const testId = (0, utils_1.useTestIds)(props, label);
13
12
  return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.TextField, Object.assign({ label: label, value: field.value || undefined, onChange: onChange, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, onBlur: () => {
14
13
  (0, utils_1.maybeCall)(onBlur);
15
14
  field.blur();
@@ -5,11 +5,10 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
5
5
  const mobx_react_1 = require("mobx-react");
6
6
  const inputs_1 = require("../inputs");
7
7
  const utils_1 = require("../utils");
8
- const defaultLabel_1 = require("../utils/defaultLabel");
9
8
  /** Wraps `ToggleChipGroup` and binds it to a form field. */
10
9
  function BoundToggleChipGroupField(props) {
11
- const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), ...others } = props;
12
- const testId = (0, utils_1.useTestIds)(props, field.key);
10
+ const { field, onChange = (value) => field.set(value), label = (0, utils_1.defaultLabel)(field.key), ...others } = props;
11
+ const testId = (0, utils_1.useTestIds)(props, label);
13
12
  return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => (0, jsx_runtime_1.jsx)(inputs_1.ToggleChipGroup, Object.assign({ label: label, values: field.value || [], onChange: onChange }, testId, others), void 0) }, void 0));
14
13
  }
15
14
  exports.BoundToggleChipGroupField = BoundToggleChipGroupField;
@@ -4,11 +4,10 @@ exports.StaticField = void 0;
4
4
  const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
5
5
  const utils_1 = require("@react-aria/utils");
6
6
  const Css_1 = require("../Css");
7
- const defaultTestId_1 = require("../utils/defaultTestId");
8
7
  const useTestIds_1 = require("../utils/useTestIds");
9
8
  function StaticField(props) {
10
9
  const { label, value, children } = props;
11
- const tid = (0, useTestIds_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
10
+ const tid = (0, useTestIds_1.useTestIds)(props, label);
12
11
  const id = (0, utils_1.useId)();
13
12
  return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ css: Css_1.Css.db.sm.gray700.mbPx(4).$, htmlFor: id }, tid.label, { children: label }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ id: id, css: Css_1.Css.smEm.gray900.df.aic.$ }, tid, { children: value || children }), void 0)] }, void 0));
14
13
  }
@@ -8,13 +8,12 @@ const HelperText_1 = require("../components/HelperText");
8
8
  const Css_1 = require("../Css");
9
9
  const ErrorMessage_1 = require("./ErrorMessage");
10
10
  const utils_1 = require("../utils");
11
- const defaultTestId_1 = require("../utils/defaultTestId");
12
11
  function CheckboxBase(props) {
13
12
  const { ariaProps, description, isDisabled = false, isIndeterminate = false, isSelected, inputProps, label, errorMsg, helperText, checkboxOnly = false, } = props;
14
13
  const ref = (0, react_1.useRef)(null);
15
14
  const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)(ariaProps);
16
15
  const { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled });
17
- const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
16
+ const tid = (0, utils_1.useTestIds)(props, label);
18
17
  const markIcon = isIndeterminate ? dashSmall : isSelected ? checkmarkSmall : "";
19
18
  return ((0, jsx_runtime_1.jsxs)("label", Object.assign({ css: Css_1.Css.df.cursorPointer.relative
20
19
  // Prevents accidental checkbox clicks due to label width being longer
@@ -13,7 +13,6 @@ const Css_1 = require("../../Css");
13
13
  const utils_1 = require("./utils");
14
14
  const TextFieldBase_1 = require("../TextFieldBase");
15
15
  const utils_2 = require("../../utils");
16
- const defaultTestId_1 = require("../../utils/defaultTestId");
17
16
  function DateFieldBase(props) {
18
17
  var _a;
19
18
  const { label, disabled, required, value, onFocus, onBlur,
@@ -31,7 +30,7 @@ function DateFieldBase(props) {
31
30
  // This makes working within the DateRangePicker much more user friendly.
32
31
  const [wipValue, setWipValue] = (0, react_1.useState)(value);
33
32
  const [inputValue, setInputValue] = (0, react_1.useState)((_a = (props.mode === "range" ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat))) !== null && _a !== void 0 ? _a : "");
34
- const tid = (0, utils_2.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
33
+ const tid = (0, utils_2.useTestIds)(props, label);
35
34
  const isDisabled = !!disabled;
36
35
  const isReadOnly = !!readOnly;
37
36
  const textFieldProps = {
@@ -3,13 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.MultiSelectField = void 0;
4
4
  const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
5
5
  const utils_1 = require("../utils");
6
- const defaultTestId_1 = require("../utils/defaultTestId");
7
6
  /** Mocks out `MultiSelectField` as a multiple `<select>` field. */
8
7
  function MultiSelectField(props) {
9
8
  const { getOptionValue = (o) => o.id, // if unset, assume O implements HasId
10
9
  getOptionLabel = (o) => o.name, // if unset, assume O implements HasName
11
10
  values, options, onSelect, readOnly = false, errorMsg, onFocus, onBlur, disabled, label, } = props;
12
- const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
11
+ const tid = (0, utils_1.useTestIds)(props, label);
13
12
  return ((0, jsx_runtime_1.jsxs)("select", Object.assign({}, tid, {
14
13
  // We're cheating and assume the values are strings...what we should really do is either:
15
14
  // a) use beam's valueToKey mapping to string-encode any Value, or
@@ -9,7 +9,6 @@ const HelperText_1 = require("../components/HelperText");
9
9
  const Label_1 = require("../components/Label");
10
10
  const Css_1 = require("../Css");
11
11
  const ErrorMessage_1 = require("./ErrorMessage");
12
- const defaultTestId_1 = require("../utils/defaultTestId");
13
12
  const useTestIds_1 = require("../utils/useTestIds");
14
13
  let nextNameId = 0;
15
14
  /**
@@ -30,7 +29,7 @@ function RadioGroupField(props) {
30
29
  isDisabled: disabled,
31
30
  isReadOnly: false,
32
31
  });
33
- const tid = (0, useTestIds_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
32
+ const tid = (0, useTestIds_1.useTestIds)(props, label);
34
33
  // We use useRadioGroup b/c it does neat keyboard up/down stuff
35
34
  // TODO: Pass read only, required, error message to useRadioGroup
36
35
  const { labelProps, radioGroupProps } = (0, react_aria_1.useRadioGroup)({ label, isDisabled: disabled }, state);
@@ -2,14 +2,13 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.RichTextField = void 0;
4
4
  const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
5
- const change_case_1 = require("change-case");
6
5
  const react_1 = require("react");
7
6
  const utils_1 = require("../utils");
8
7
  /** Mocks out `RichTextField` as a text `<input>` field. */
9
8
  function RichTextField(props) {
10
9
  const { onBlur = () => { }, onFocus = () => { }, readOnly } = props;
11
10
  const [value, setValue] = (0, react_1.useState)(props.value || "");
12
- const tid = (0, utils_1.useTestIds)(props, defaultTestId(props.label || "richTextField"));
11
+ const tid = (0, utils_1.useTestIds)(props, props.label || "richTextField");
13
12
  return ((0, jsx_runtime_1.jsx)("input", Object.assign({ type: "text", value: value, onChange: (e) => {
14
13
  const { value } = e.target;
15
14
  setValue(value);
@@ -17,6 +16,3 @@ function RichTextField(props) {
17
16
  }, onBlur: onBlur, onFocus: onFocus, readOnly: readOnly }, tid), void 0));
18
17
  }
19
18
  exports.RichTextField = RichTextField;
20
- function defaultTestId(label) {
21
- return (0, change_case_1.camelCase)(label);
22
- }
@@ -4,13 +4,12 @@ exports.SelectField = void 0;
4
4
  const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
5
5
  const react_1 = require("react");
6
6
  const utils_1 = require("../utils");
7
- const defaultTestId_1 = require("../utils/defaultTestId");
8
7
  /** Mocks out `SelectField` as a `<select>` field. */
9
8
  function SelectField(props) {
10
9
  const { getOptionValue = (o) => o.id, // if unset, assume O implements HasId
11
10
  getOptionLabel = (o) => o.name, // if unset, assume O implements HasName
12
11
  value, options: maybeOptions, onSelect, readOnly = false, errorMsg, onBlur, onFocus, disabled, disabledOptions = [], label, } = props;
13
- const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
12
+ const tid = (0, utils_1.useTestIds)(props, label);
14
13
  const [options, setOptions] = (0, react_1.useState)(Array.isArray(maybeOptions) ? maybeOptions : maybeOptions.initial);
15
14
  const currentOption = options.find((o) => getOptionValue(o) === value) || options[0];
16
15
  (0, react_1.useEffect)(() => {
@@ -11,7 +11,6 @@ const PresentationContext_1 = require("../components/PresentationContext");
11
11
  const Css_1 = require("../Css");
12
12
  const labelUtils_1 = require("../forms/labelUtils");
13
13
  const ErrorMessage_1 = require("./ErrorMessage");
14
- const defaultTestId_1 = require("../utils/defaultTestId");
15
14
  const useTestIds_1 = require("../utils/useTestIds");
16
15
  // Used by both TextField and TextArea
17
16
  function TextFieldBase(props) {
@@ -25,7 +24,7 @@ function TextFieldBase(props) {
25
24
  const errorMessageId = `${inputProps.id}-error`;
26
25
  const labelSuffix = (0, labelUtils_1.getLabelSuffix)(required);
27
26
  const ElementType = multiline ? "textarea" : "input";
28
- const tid = (0, useTestIds_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
27
+ const tid = (0, useTestIds_1.useTestIds)(props, label);
29
28
  const [isFocused, setIsFocused] = (0, react_1.useState)(false);
30
29
  const { hoverProps, isHovered } = (0, react_aria_1.useHover)({});
31
30
  const { focusWithinProps } = (0, react_aria_1.useFocusWithin)({ onFocusWithinChange: setIsFocused });
@@ -1,5 +1,7 @@
1
1
  import { MutableRefObject } from "react";
2
2
  import type { CheckboxGroupState, ToggleState } from "react-stately";
3
+ export * from "./defaultTestId";
4
+ export * from "./defaultLabel";
3
5
  /** Adapts our state to what useToggleState returns in a stateless manner. */
4
6
  export declare function toToggleState(isSelected: boolean, onChange: (value: boolean) => void): ToggleState;
5
7
  /** Adapts our state to what use*Group returns in a stateless manner. */
@@ -11,6 +11,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
11
11
  };
12
12
  Object.defineProperty(exports, "__esModule", { value: true });
13
13
  exports.areArraysEqual = exports.isAbsoluteUrl = exports.EmptyRef = exports.safeEntries = exports.noop = exports.omitKey = exports.safeKeys = exports.maybeCall = exports.toGroupState = exports.toToggleState = void 0;
14
+ __exportStar(require("./defaultTestId"), exports);
15
+ __exportStar(require("./defaultLabel"), exports);
14
16
  /** Adapts our state to what useToggleState returns in a stateless manner. */
15
17
  function toToggleState(isSelected, onChange) {
16
18
  return {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homebound/beam",
3
- "version": "2.146.0",
3
+ "version": "2.146.1",
4
4
  "author": "Homebound",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",