@torq-north/react-tools 1.4.3 → 1.4.5

package/dist/index.cjs

@@ -536,7 +536,7 @@ var DateFormField = function (_a) {
             ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), input = _e.input, meta = _e.meta;
     var _f = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.datePicker) !== null && _b !== void 0 ? _b : {}), datePickerSlotProps = _f.slotProps, remainingDatePickerProps = __rest(_f, ["slotProps"]);
     var mergedSlotProps = __assign(__assign({}, datePickerSlotProps), { textField: __assign({ fullWidth: true, required: required, color: meta.touched && meta.error ? "error" : undefined, error: meta.touched && meta.error, helperText: (meta.touched && meta.error) || helperText, onFocus: input.onFocus, onBlur: input.onBlur }, datePickerSlotProps === null || datePickerSlotProps === void 0 ? void 0 : datePickerSlotProps.textField) });
-    return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsx(xDatePickers.DatePicker, __assign({ label: label, disabled: disabled, views: ["year", "month", "day"], value: input.value ? dayjs(input.value) : null, onChange: function (value) {
+    return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsx(xDatePickers.DatePicker, __assign({ label: label, disabled: disabled, views: ["year", "month", "day"], value: input.value ? dayjs(input.value) : null, onOpen: input.onFocus, onClose: input.onBlur, onChange: function (value) {
                 return input.onChange(formatAsDate ? value === null || value === void 0 ? void 0 : value.format("YYYY-MM-DD") : value === null || value === void 0 ? void 0 : value.toJSON());
             }, slotProps: mergedSlotProps }, remainingDatePickerProps)) }));
 };
@@ -548,7 +548,7 @@ var DateTimeFormField = function (_a) {
             ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), input = _d.input, meta = _d.meta;
     var _e = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.dateTimePicker) !== null && _b !== void 0 ? _b : {}), dateTimePickerSlotProps = _e.slotProps, remainingDateTimePickerProps = __rest(_e, ["slotProps"]);
     var mergedSlotProps = __assign(__assign({}, dateTimePickerSlotProps), { textField: __assign({ fullWidth: true, required: required, color: meta.touched && meta.error ? "error" : undefined, error: meta.touched && meta.error, helperText: (meta.touched && meta.error) || helperText, onFocus: input.onFocus, onBlur: input.onBlur }, dateTimePickerSlotProps === null || dateTimePickerSlotProps === void 0 ? void 0 : dateTimePickerSlotProps.textField) });
-    return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsx(xDatePickers.DateTimePicker, __assign({ label: label, disabled: disabled, value: input.value ? dayjs(input.value) : null, onChange: function (value) { return input.onChange(value === null || value === void 0 ? void 0 : value.toJSON()); }, slotProps: mergedSlotProps }, remainingDateTimePickerProps)) }));
+    return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsx(xDatePickers.DateTimePicker, __assign({ label: label, disabled: disabled, value: input.value ? dayjs(input.value) : null, onOpen: input.onFocus, onClose: input.onBlur, onChange: function (value) { return input.onChange(value === null || value === void 0 ? void 0 : value.toJSON()); }, slotProps: mergedSlotProps }, remainingDateTimePickerProps)) }));
 };
 
 //Courtesy of https://stackoverflow.com/questions/58099124/how-to-use-custom-radio-component-with-react-final-form
@@ -562,11 +562,11 @@ var RadioFormField = function (_a) {
     var _c = reactFinalForm.useField(name, __assign({ validate: required
             ? 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;
     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) {
-                        var _a, _b;
+                        var _a;
                         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) {
                                     var input = _a.input, meta = _a.meta;
                                     return (jsxRuntime.jsx(RadioOption, { input: input, meta: meta, disabled: disabled, required: required, radioProps: slotProps === null || slotProps === void 0 ? void 0 : slotProps.radio }));
-                                } }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.radioField)) }, typeof o === "string" ? o : ((_b = o.text) !== null && _b !== void 0 ? _b : o.value)));
+                                } }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.radioField)) }, typeof o === "string" ? o : o.value));
                     }) }), (((visited || disabled) && error) || helperText) && (jsxRuntime.jsx(material.FormHelperText, { error: error != null || forceError, sx: { marginTop: 0 }, children: error || helperText }))] }) }));
 };
 

package/dist/index.es.js

@@ -534,7 +534,7 @@ var DateFormField = function (_a) {
             ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), input = _e.input, meta = _e.meta;
     var _f = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.datePicker) !== null && _b !== void 0 ? _b : {}), datePickerSlotProps = _f.slotProps, remainingDatePickerProps = __rest(_f, ["slotProps"]);
     var mergedSlotProps = __assign(__assign({}, datePickerSlotProps), { textField: __assign({ fullWidth: true, required: required, color: meta.touched && meta.error ? "error" : undefined, error: meta.touched && meta.error, helperText: (meta.touched && meta.error) || helperText, onFocus: input.onFocus, onBlur: input.onBlur }, datePickerSlotProps === null || datePickerSlotProps === void 0 ? void 0 : datePickerSlotProps.textField) });
-    return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsx(DatePicker, __assign({ label: label, disabled: disabled, views: ["year", "month", "day"], value: input.value ? dayjs(input.value) : null, onChange: function (value) {
+    return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsx(DatePicker, __assign({ label: label, disabled: disabled, views: ["year", "month", "day"], value: input.value ? dayjs(input.value) : null, onOpen: input.onFocus, onClose: input.onBlur, onChange: function (value) {
                 return input.onChange(formatAsDate ? value === null || value === void 0 ? void 0 : value.format("YYYY-MM-DD") : value === null || value === void 0 ? void 0 : value.toJSON());
             }, slotProps: mergedSlotProps }, remainingDatePickerProps)) }));
 };
@@ -546,7 +546,7 @@ var DateTimeFormField = function (_a) {
             ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), input = _d.input, meta = _d.meta;
     var _e = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.dateTimePicker) !== null && _b !== void 0 ? _b : {}), dateTimePickerSlotProps = _e.slotProps, remainingDateTimePickerProps = __rest(_e, ["slotProps"]);
     var mergedSlotProps = __assign(__assign({}, dateTimePickerSlotProps), { textField: __assign({ fullWidth: true, required: required, color: meta.touched && meta.error ? "error" : undefined, error: meta.touched && meta.error, helperText: (meta.touched && meta.error) || helperText, onFocus: input.onFocus, onBlur: input.onBlur }, dateTimePickerSlotProps === null || dateTimePickerSlotProps === void 0 ? void 0 : dateTimePickerSlotProps.textField) });
-    return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsx(DateTimePicker, __assign({ label: label, disabled: disabled, value: input.value ? dayjs(input.value) : null, onChange: function (value) { return input.onChange(value === null || value === void 0 ? void 0 : value.toJSON()); }, slotProps: mergedSlotProps }, remainingDateTimePickerProps)) }));
+    return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsx(DateTimePicker, __assign({ label: label, disabled: disabled, value: input.value ? dayjs(input.value) : null, onOpen: input.onFocus, onClose: input.onBlur, onChange: function (value) { return input.onChange(value === null || value === void 0 ? void 0 : value.toJSON()); }, slotProps: mergedSlotProps }, remainingDateTimePickerProps)) }));
 };
 
 //Courtesy of https://stackoverflow.com/questions/58099124/how-to-use-custom-radio-component-with-react-final-form
@@ -560,11 +560,11 @@ var RadioFormField = function (_a) {
     var _c = useField(name, __assign({ validate: required
             ? 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;
     return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxs(FormControl, { required: required, children: [label && (jsx(FormLabel, { id: "".concat(name, "-radio-buttons-group-label"), disabled: disabled, children: label })), jsx(RadioGroup, { "aria-labelledby": "".concat(name, "-radio-buttons-group-label"), row: !vertical, children: options.map(function (o) {
-                        var _a, _b;
+                        var _a;
                         return (jsx(FormControlLabel, { label: typeof o === "string" ? o : ((_a = o.text) !== null && _a !== void 0 ? _a : o.value), disabled: disabled, control: jsx(Field, __assign({ name: name, value: typeof o === "string" ? o : o.value, type: "radio", render: function (_a) {
                                     var input = _a.input, meta = _a.meta;
                                     return (jsx(RadioOption, { input: input, meta: meta, disabled: disabled, required: required, radioProps: slotProps === null || slotProps === void 0 ? void 0 : slotProps.radio }));
-                                } }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.radioField)) }, typeof o === "string" ? o : ((_b = o.text) !== null && _b !== void 0 ? _b : o.value)));
+                                } }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.radioField)) }, typeof o === "string" ? o : o.value));
                     }) }), (((visited || disabled) && error) || helperText) && (jsx(FormHelperText, { error: error != null || forceError, sx: { marginTop: 0 }, children: error || helperText }))] }) }));
 };
 

package/dist/src/Form/Components/RadioFormField.d.ts

@@ -4,7 +4,7 @@ import { FieldProps } from "react-final-form";
 import { CommonFieldProps } from "../Types";
 export interface RadioFormFieldOption {
     value: string | number;
-    text?: string | number;
+    text?: React.ReactNode;
 }
 export interface RadioFormFieldProps extends CommonFieldProps<{
     radio?: RadioProps;

package/dist/src/Form/Types/commonFieldProps.d.ts

@@ -1,9 +1,10 @@
 import { UseFieldConfig } from "react-final-form";
 import { FieldWrapperProps } from "../Components";
 import type { Validator } from "./Validator";
+import React from "react";
 export interface CommonFieldProps<AdditionalSlotProps = {}> extends Omit<FieldWrapperProps, "children"> {
     name: string;
-    label?: string;
+    label?: React.ReactNode;
     required?: boolean;
     disabled?: boolean;
     helperText?: string;

package/dist/src/Form/Utilities/renderSelectOptions.d.ts

@@ -1,14 +1,15 @@
+import React from "react";
 export interface SelectFormFieldOption {
     value?: number | string;
     text: React.ReactNode;
-    subText?: string;
+    subText?: React.ReactNode;
     disabled?: boolean;
 }
 export interface GroupedSelectFormFieldOptions {
-    group?: string;
+    group?: React.ReactNode;
     options: (SelectFormFieldOption | string)[];
 }
 export declare function isGroup(o: SelectFormFieldOption | GroupedSelectFormFieldOptions | string): o is GroupedSelectFormFieldOptions;
-export declare function renderSelectOptions(options: (SelectFormFieldOption | GroupedSelectFormFieldOptions | string)[]): (string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined)[];
-export declare function renderCheckboxSelectOptions(options: (SelectFormFieldOption | GroupedSelectFormFieldOptions | string)[], values: (string | number | undefined)[]): (string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined)[];
+export declare function renderSelectOptions(options: (SelectFormFieldOption | GroupedSelectFormFieldOptions | string)[]): (string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined)[];
+export declare function renderCheckboxSelectOptions(options: (SelectFormFieldOption | GroupedSelectFormFieldOptions | string)[], values: (string | number | undefined)[]): (string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined)[];
 export declare function buildCheckboxOption(option: string | SelectFormFieldOption | GroupedSelectFormFieldOptions, values: (string | number | undefined)[]): React.ReactNode | React.ReactNode[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@torq-north/react-tools",
   "type": "module",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "description": "A collection of commonly used utilities",
   "author": "@torq-north",
   "license": "SEE LICENCE.md",