@torq-north/react-tools 1.4.5 → 1.4.7

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.
Files changed (5) hide show
  1. package/dist/index.cjs +63 -17
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.es.js +63 -17
  4. package/dist/index.es.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -460,21 +460,45 @@ function render(option, showCheckbox, isSelected) {
460
460
  }
461
461
 
462
462
  function SelectFormField(_a) {
463
- var _b, _c;
464
- var name = _a.name, label = _a.label, required = _a.required, disabled = _a.disabled, helperText = _a.helperText, slotProps = _a.slotProps, isClearable = _a.isClearable, options = _a.options, icon = _a.icon, showSpace = _a.showSpace, format = _a.format, _d = _a.validators, validators = _d === void 0 ? [] : _d;
465
- var _e = useField(name, __assign({ format: format, validate: required
466
- ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), _f = _e.input, value = _f.value, onChange = _f.onChange, otherInputProps = __rest(_f, ["value", "onChange"]), meta = _e.meta;
467
- var _g = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _b !== void 0 ? _b : {}), textFieldSlotProps = _g.slotProps, remainingTextFieldProps = __rest(_g, ["slotProps"]);
463
+ var _b;
464
+ var name = _a.name, label = _a.label, required = _a.required, disabled = _a.disabled, helperText = _a.helperText, slotProps = _a.slotProps, isClearable = _a.isClearable, options = _a.options, icon = _a.icon, showSpace = _a.showSpace, format = _a.format, _c = _a.validators, validators = _c === void 0 ? [] : _c;
465
+ var _d = useField(name, __assign({ format: format, validate: required
466
+ ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), _e = _d.input, value = _e.value, onChange = _e.onChange, otherInputProps = __rest(_e, ["value", "onChange"]), meta = _d.meta;
467
+ var _f = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _b !== void 0 ? _b : {}), textFieldSlotProps = _f.slotProps, remainingTextFieldProps = __rest(_f, ["slotProps"]);
468
468
  // SlotProps can be an object or a callback; we only support the object form here.
469
469
  var inputSlotProps = typeof (textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.input) === "function"
470
470
  ? undefined
471
471
  : textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.input;
472
472
  var hasEndAdornment = isClearable || (inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment);
473
- var mergedSlotProps = __assign(__assign({}, textFieldSlotProps), { input: __assign(__assign({}, otherInputProps), inputSlotProps), select: __assign(__assign({}, textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select), (hasEndAdornment && {
474
- endAdornment: (jsxs(Stack, { direction: "row", spacing: 1, pr: 2, children: [inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment, " ", isClearable && (jsx(IconButton, { size: (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) === null || _c === void 0 ? void 0 : _c.size, onClick: function () { return onChange(undefined); }, children: jsx(CloseIcon, { fontSize: "inherit" }) }))] })),
473
+ var _g = useState(false), isMousedOver = _g[0], setIsMousedOver = _g[1];
474
+ var _h = useState(false), isFocused = _h[0], setIsFocused = _h[1];
475
+ var mergedSlotProps = __assign(__assign({}, textFieldSlotProps), { input: __assign(__assign(__assign({}, otherInputProps), inputSlotProps), { onFocus: function (event) {
476
+ var _a;
477
+ setIsFocused(true);
478
+ (_a = inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputSlotProps, event);
479
+ }, onBlur: function (event) {
480
+ var _a;
481
+ setIsFocused(false);
482
+ (_a = inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputSlotProps, event);
483
+ } }), select: __assign(__assign(__assign({}, textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select), { onClose: function (e) {
484
+ var _a, _b;
485
+ typeof (textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select) === "function"
486
+ ? undefined
487
+ : (_b = (_a = textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a, e);
488
+ //When opening a select and then moving the mouse away, the input does not register as
489
+ // being unhovered. We can fudge this by setting the hover state to false when the options
490
+ // menu is closed. If the mouse is still over the input when the menu is closed, the hover state
491
+ // will be set to true automatically by the onMouseEnter event handler (and the focus state is
492
+ // always true the whole time so the clear button won't flicker)
493
+ setIsMousedOver(false);
494
+ } }), (hasEndAdornment && {
495
+ endAdornment: (jsxs(Stack, { direction: "row", spacing: 1, pr: 2, children: [isClearable &&
496
+ (isMousedOver || isFocused) &&
497
+ value != null &&
498
+ value != "" && (jsx(IconButton, { size: "small", onClick: function () { return onChange(undefined); }, tabIndex: -1, children: jsx(CloseIcon, { fontSize: "small" }) })), inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment] })),
475
499
  })) });
476
500
  var renderedOptions = useMemo(function () { return renderSelectOptions(options); }, [options]);
477
- return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxs(TextField, __assign({ fullWidth: true, select: true, label: label, required: required, disabled: disabled, error: meta.touched && meta.error, helperText: (meta.touched && meta.error) || helperText, value: value ? value : [], onChange: onChange, slotProps: mergedSlotProps }, remainingTextFieldProps, { children: [renderedOptions, !options && jsx(MenuItem, {})] })) }));
501
+ return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxs(TextField, __assign({ onMouseEnter: function () { return setIsMousedOver(true); }, onMouseLeave: function () { return setIsMousedOver(false); }, fullWidth: true, select: true, label: label, required: required, disabled: disabled, error: meta.touched && meta.error, helperText: (meta.touched && meta.error) || helperText, value: value ? value : [], onChange: onChange, slotProps: mergedSlotProps }, remainingTextFieldProps, { children: [renderedOptions, !options && jsx(MenuItem, {})] })) }));
478
502
  }
479
503
 
480
504
  function findTextFor(value, options) {
@@ -499,20 +523,42 @@ function findTextFor(value, options) {
499
523
  }
500
524
  }
501
525
  function MultiSelectFormField(_a) {
502
- var _b, _c;
503
- var name = _a.name, label = _a.label, required = _a.required, disabled = _a.disabled, helperText = _a.helperText, slotProps = _a.slotProps, isClearable = _a.isClearable, options = _a.options, icon = _a.icon, showSpace = _a.showSpace, format = _a.format, _d = _a.validators, validators = _d === void 0 ? [] : _d;
504
- var _e = useField(name, __assign({ format: format, validate: required
505
- ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), _f = _e.input, value = _f.value, onChange = _f.onChange, otherInputProps = __rest(_f, ["value", "onChange"]), meta = _e.meta;
506
- var _g = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _b !== void 0 ? _b : {}), textFieldSlotProps = _g.slotProps, remainingTextFieldProps = __rest(_g, ["slotProps"]);
526
+ var _b;
527
+ var name = _a.name, label = _a.label, required = _a.required, disabled = _a.disabled, helperText = _a.helperText, slotProps = _a.slotProps, isClearable = _a.isClearable, options = _a.options, icon = _a.icon, showSpace = _a.showSpace, format = _a.format, _c = _a.validators, validators = _c === void 0 ? [] : _c;
528
+ var _d = useField(name, __assign({ format: format, validate: required
529
+ ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), _e = _d.input, value = _e.value, onChange = _e.onChange, otherInputProps = __rest(_e, ["value", "onChange"]), meta = _d.meta;
530
+ var _f = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _b !== void 0 ? _b : {}), textFieldSlotProps = _f.slotProps, remainingTextFieldProps = __rest(_f, ["slotProps"]);
507
531
  // SlotProps can be an object or a callback; we only support the object form here.
508
532
  var inputSlotProps = typeof (textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.input) === "function"
509
533
  ? undefined
510
534
  : textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.input;
511
- var mergedSlotProps = __assign(__assign({}, textFieldSlotProps), { input: __assign(__assign({}, otherInputProps), inputSlotProps), select: __assign(__assign({}, textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select), { endAdornment: (jsxs(Stack, { direction: "row", spacing: 1, pr: 2, children: [inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment, " ", isClearable && (jsx(IconButton, { size: (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) === null || _c === void 0 ? void 0 : _c.size, onClick: function () { return onChange([]); }, children: jsx(CloseIcon, { fontSize: "inherit" }) }))] })), multiple: true, renderValue: function (selected) { return (jsx(Box, { whiteSpace: "normal", children: selected
512
- .map(function (s) { var _a; return (_a = findTextFor(s, options)) !== null && _a !== void 0 ? _a : "Unknown"; })
513
- .join(", ") })); } }) });
535
+ var _g = useState(false), isMousedOver = _g[0], setIsMousedOver = _g[1];
536
+ var _h = useState(false), isFocused = _h[0], setIsFocused = _h[1];
537
+ var mergedSlotProps = __assign(__assign({}, textFieldSlotProps), { input: __assign(__assign(__assign({}, otherInputProps), inputSlotProps), { onFocus: function (event) {
538
+ var _a;
539
+ setIsFocused(true);
540
+ (_a = inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputSlotProps, event);
541
+ }, onBlur: function (event) {
542
+ var _a;
543
+ setIsFocused(false);
544
+ (_a = inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputSlotProps, event);
545
+ } }), select: __assign(__assign({}, textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select), { onClose: function (e) {
546
+ var _a, _b;
547
+ typeof (textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select) === "function"
548
+ ? undefined
549
+ : (_b = (_a = textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a, e);
550
+ //When opening a select and then moving the mouse away, the input does not register as
551
+ // being unhovered. We can fudge this by setting the hover state to false when the options
552
+ // menu is closed. If the mouse is still over the input when the menu is closed, the hover state
553
+ // will be set to true automatically by the onMouseEnter event handler (and the focus state is
554
+ // always true the whole time so the clear button won't flicker)
555
+ setIsMousedOver(false);
556
+ }, endAdornment: (jsxs(Stack, { direction: "row", spacing: 1, pr: 2, children: [isClearable && (isMousedOver || isFocused) && (value === null || value === void 0 ? void 0 : value.length) > 0 && (jsx(IconButton, { size: "small", onClick: function () { return onChange([]); }, tabIndex: -1, children: jsx(CloseIcon, { fontSize: "small" }) })), inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment] })), multiple: true, renderValue: function (selected) { return (jsx(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", children: selected.map(function (s, index) {
557
+ var _a;
558
+ return (jsxs(React.Fragment, { children: [index > 0 && ", ", (_a = findTextFor(s, options)) !== null && _a !== void 0 ? _a : "Unknown"] }, s));
559
+ }) })); } }) });
514
560
  var renderedOptions = useMemo(function () { return renderCheckboxSelectOptions(options, value); }, [options, value]);
515
- return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxs(TextField, __assign({ fullWidth: true, select: true, label: label, required: required, disabled: disabled, error: meta.touched && meta.error, helperText: (meta.touched && meta.error) || helperText, value: value ? value : [], onChange: onChange, slotProps: mergedSlotProps }, remainingTextFieldProps, { children: [renderedOptions, !options && jsx(MenuItem, {})] })) }));
561
+ return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxs(TextField, __assign({ onMouseEnter: function () { return setIsMousedOver(true); }, onMouseLeave: function () { return setIsMousedOver(false); }, fullWidth: true, select: true, label: label, required: required, disabled: disabled, error: meta.touched && meta.error, helperText: (meta.touched && meta.error) || helperText, value: value ? value : [], onChange: onChange, slotProps: mergedSlotProps }, remainingTextFieldProps, { children: [renderedOptions, !options && jsx(MenuItem, {})] })) }));
516
562
  }
517
563
 
518
564
  var mustBeChecked = function (v) {