@torq-north/react-tools 1.4.4 → 1.4.6

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 (8) hide show
  1. package/dist/index.cjs +43 -19
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.es.js +43 -19
  4. package/dist/index.es.js.map +1 -1
  5. package/dist/src/Form/Components/RadioFormField.d.ts +1 -1
  6. package/dist/src/Form/Types/commonFieldProps.d.ts +2 -1
  7. package/dist/src/Form/Utilities/renderSelectOptions.d.ts +5 -4
  8. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -462,21 +462,34 @@ function render(option, showCheckbox, isSelected) {
462
462
  }
463
463
 
464
464
  function SelectFormField(_a) {
465
- var _b, _c;
466
- 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;
467
- var _e = reactFinalForm.useField(name, __assign({ format: format, validate: required
468
- ? 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;
469
- var _g = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _b !== void 0 ? _b : {}), textFieldSlotProps = _g.slotProps, remainingTextFieldProps = __rest(_g, ["slotProps"]);
465
+ var _b;
466
+ 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;
467
+ var _d = reactFinalForm.useField(name, __assign({ format: format, validate: required
468
+ ? 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;
469
+ var _f = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _b !== void 0 ? _b : {}), textFieldSlotProps = _f.slotProps, remainingTextFieldProps = __rest(_f, ["slotProps"]);
470
470
  // SlotProps can be an object or a callback; we only support the object form here.
471
471
  var inputSlotProps = typeof (textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.input) === "function"
472
472
  ? undefined
473
473
  : textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.input;
474
474
  var hasEndAdornment = isClearable || (inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment);
475
- var mergedSlotProps = __assign(__assign({}, textFieldSlotProps), { input: __assign(__assign({}, otherInputProps), inputSlotProps), select: __assign(__assign({}, textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select), (hasEndAdornment && {
476
- endAdornment: (jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 1, pr: 2, children: [inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment, " ", isClearable && (jsxRuntime.jsx(material.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: jsxRuntime.jsx(CloseIcon, { fontSize: "inherit" }) }))] })),
475
+ var _g = React.useState(false), isMousedOver = _g[0], setIsMousedOver = _g[1];
476
+ var _h = React.useState(false), isFocused = _h[0], setIsFocused = _h[1];
477
+ var mergedSlotProps = __assign(__assign({}, textFieldSlotProps), { input: __assign(__assign(__assign({}, otherInputProps), inputSlotProps), { onFocus: function (event) {
478
+ var _a;
479
+ setIsFocused(true);
480
+ (_a = inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputSlotProps, event);
481
+ }, onBlur: function (event) {
482
+ var _a;
483
+ setIsFocused(false);
484
+ (_a = inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputSlotProps, event);
485
+ } }), select: __assign(__assign({}, textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select), (hasEndAdornment && {
486
+ endAdornment: (jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 1, pr: 2, children: [isClearable &&
487
+ (isMousedOver || isFocused) &&
488
+ value != null &&
489
+ value != "" && (jsxRuntime.jsx(material.IconButton, { size: "small", onClick: function () { return onChange(undefined); }, tabIndex: -1, children: jsxRuntime.jsx(CloseIcon, { fontSize: "small" }) })), inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment] })),
477
490
  })) });
478
491
  var renderedOptions = React.useMemo(function () { return renderSelectOptions(options); }, [options]);
479
- return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsxs(material.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 && jsxRuntime.jsx(material.MenuItem, {})] })) }));
492
+ return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsxs(material.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 && jsxRuntime.jsx(material.MenuItem, {})] })) }));
480
493
  }
481
494
 
482
495
  function findTextFor(value, options) {
@@ -501,20 +514,31 @@ function findTextFor(value, options) {
501
514
  }
502
515
  }
503
516
  function MultiSelectFormField(_a) {
504
- var _b, _c;
505
- 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;
506
- var _e = reactFinalForm.useField(name, __assign({ format: format, validate: required
507
- ? 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;
508
- var _g = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _b !== void 0 ? _b : {}), textFieldSlotProps = _g.slotProps, remainingTextFieldProps = __rest(_g, ["slotProps"]);
517
+ var _b;
518
+ 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;
519
+ var _d = reactFinalForm.useField(name, __assign({ format: format, validate: required
520
+ ? 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;
521
+ var _f = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _b !== void 0 ? _b : {}), textFieldSlotProps = _f.slotProps, remainingTextFieldProps = __rest(_f, ["slotProps"]);
509
522
  // SlotProps can be an object or a callback; we only support the object form here.
510
523
  var inputSlotProps = typeof (textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.input) === "function"
511
524
  ? undefined
512
525
  : textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.input;
513
- var mergedSlotProps = __assign(__assign({}, textFieldSlotProps), { input: __assign(__assign({}, otherInputProps), inputSlotProps), select: __assign(__assign({}, textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select), { endAdornment: (jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 1, pr: 2, children: [inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment, " ", isClearable && (jsxRuntime.jsx(material.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: jsxRuntime.jsx(CloseIcon, { fontSize: "inherit" }) }))] })), multiple: true, renderValue: function (selected) { return (jsxRuntime.jsx(material.Box, { whiteSpace: "normal", children: selected
514
- .map(function (s) { var _a; return (_a = findTextFor(s, options)) !== null && _a !== void 0 ? _a : "Unknown"; })
515
- .join(", ") })); } }) });
526
+ var _g = React.useState(false), isMousedOver = _g[0], setIsMousedOver = _g[1];
527
+ var _h = React.useState(false), isFocused = _h[0], setIsFocused = _h[1];
528
+ var mergedSlotProps = __assign(__assign({}, textFieldSlotProps), { input: __assign(__assign(__assign({}, otherInputProps), inputSlotProps), { onFocus: function (event) {
529
+ var _a;
530
+ setIsFocused(true);
531
+ (_a = inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputSlotProps, event);
532
+ }, onBlur: function (event) {
533
+ var _a;
534
+ setIsFocused(false);
535
+ (_a = inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputSlotProps, event);
536
+ } }), select: __assign(__assign({}, textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select), { endAdornment: (jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 1, pr: 2, children: [isClearable && (isMousedOver || isFocused) && (value === null || value === void 0 ? void 0 : value.length) > 0 && (jsxRuntime.jsx(material.IconButton, { size: "small", onClick: function () { return onChange([]); }, tabIndex: -1, children: jsxRuntime.jsx(CloseIcon, { fontSize: "small" }) })), inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment] })), multiple: true, renderValue: function (selected) { return (jsxRuntime.jsx(material.Stack, { direction: "row", spacing: 1, flexWrap: "wrap", children: selected.map(function (s, index) {
537
+ var _a;
538
+ return (jsxRuntime.jsxs(React.Fragment, { children: [index > 0 && ", ", (_a = findTextFor(s, options)) !== null && _a !== void 0 ? _a : "Unknown"] }, s));
539
+ }) })); } }) });
516
540
  var renderedOptions = React.useMemo(function () { return renderCheckboxSelectOptions(options, value); }, [options, value]);
517
- return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsxs(material.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 && jsxRuntime.jsx(material.MenuItem, {})] })) }));
541
+ return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsxs(material.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 && jsxRuntime.jsx(material.MenuItem, {})] })) }));
518
542
  }
519
543
 
520
544
  var mustBeChecked = function (v) {
@@ -562,11 +586,11 @@ var RadioFormField = function (_a) {
562
586
  var _c = reactFinalForm.useField(name, __assign({ validate: required
563
587
  ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)).meta, error = _c.error, visited = _c.visited;
564
588
  return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsxs(material.FormControl, { required: required, children: [label && (jsxRuntime.jsx(material.FormLabel, { id: "".concat(name, "-radio-buttons-group-label"), disabled: disabled, children: label })), jsxRuntime.jsx(material.RadioGroup, { "aria-labelledby": "".concat(name, "-radio-buttons-group-label"), row: !vertical, children: options.map(function (o) {
565
- var _a, _b;
589
+ var _a;
566
590
  return (jsxRuntime.jsx(material.FormControlLabel, { label: typeof o === "string" ? o : ((_a = o.text) !== null && _a !== void 0 ? _a : o.value), disabled: disabled, control: jsxRuntime.jsx(reactFinalForm.Field, __assign({ name: name, value: typeof o === "string" ? o : o.value, type: "radio", render: function (_a) {
567
591
  var input = _a.input, meta = _a.meta;
568
592
  return (jsxRuntime.jsx(RadioOption, { input: input, meta: meta, disabled: disabled, required: required, radioProps: slotProps === null || slotProps === void 0 ? void 0 : slotProps.radio }));
569
- } }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.radioField)) }, typeof o === "string" ? o : ((_b = o.text) !== null && _b !== void 0 ? _b : o.value)));
593
+ } }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.radioField)) }, typeof o === "string" ? o : o.value));
570
594
  }) }), (((visited || disabled) && error) || helperText) && (jsxRuntime.jsx(material.FormHelperText, { error: error != null || forceError, sx: { marginTop: 0 }, children: error || helperText }))] }) }));
571
595
  };
572
596