@codezee/sixtify-brahma 0.2.155 → 0.2.156

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codezee/sixtify-brahma",
-  "version": "0.2.155",
+  "version": "0.2.156",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/hardikranpariya/sixtify-brahma.git"

package/packages/shared-components/dist/FormFields/Autocomplete/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"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"}

package/packages/shared-components/dist/FormFields/Autocomplete/Autocomplete.js

@@ -21,6 +21,7 @@ const Actions_1 = require("../../Actions");
 const Toast_1 = require("../../Toast");
 const Tooltip_1 = require("../../Tooltip");
 const useAutocompleteScrollToSelected_1 = require("../../utils/hooks/useAutocompleteScrollToSelected");
+const useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
 const CheckBox_styled_1 = require("../CheckBox/CheckBox.styled");
 const commonStyles_1 = require("../commonStyles");
 const ChipV2_styled_1 = require("./ChipV2.styled");
@@ -39,6 +40,7 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
     const { open: controlledOpen, onOpen: externalOnOpen, onClose: externalOnClose, ...restMuiProps } = restProps;
     const isControlledOpen = controlledOpen !== undefined;
     const internalOpen = isControlledOpen ? controlledOpen : open;
+    const { setInputRef, maintainFocus, maintainFocusAfterClose, handleKeyDown } = (0, useFormFieldFocus_1.useFormFieldFocus)(internalOpen);
     const handleOpen = (0, react_1.useCallback)((event) => {
         if (!isControlledOpen) {
             setOpen(true);
@@ -50,7 +52,10 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
             setOpen(false);
         }
         externalOnClose?.(event, reason);
-    }, [isControlledOpen, externalOnClose]);
+        if (reason !== "toggleInput") {
+            maintainFocusAfterClose();
+        }
+    }, [isControlledOpen, externalOnClose, maintainFocusAfterClose]);
     const convertValueToOption = (val) => {
         const foundOption = (0, find_1.default)(options, (option) => option.value === val);
         return foundOption || { label: String(val), value: val };
@@ -151,7 +156,8 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
         }
         return options.find((option) => option.value === value) || null;
     }, [multiple, options, value, defaultOption]);
-    const { palette: { app: { color }, }, } = (0, material_1.useTheme)();
+    const theme = (0, material_1.useTheme)();
+    const { palette: { app: { color }, }, } = theme;
     const StyledPaper = (0, styles_1.styled)(material_1.Paper)(({ theme }) => ({
         "& .MuiAutocomplete-listbox": {
             maxHeight: 200,
@@ -245,9 +251,16 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
                                 }
                                 return placeholder || `Select ${label}`;
                             };
-                            return ((0, jsx_runtime_1.jsx)(material_1.TextField, { ...params, placeholder: multiple && selectedValue?.length ? "" : getPlaceholder(), label: styling === "default" ? label : undefined, required: styling === "default" ? required : undefined, error: error, autoFocus: !multiple ? autoFocus : false, helperText: helperText, sx: (0, commonStyles_1.getDefaultTextFieldSx)(styling), InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling), InputProps: {
+                            return ((0, jsx_runtime_1.jsx)(material_1.TextField, { ...params, placeholder: multiple && selectedValue?.length ? "" : getPlaceholder(), label: styling === "default" ? label : undefined, required: styling === "default" ? required : undefined, error: error, autoFocus: !multiple ? autoFocus : false, helperText: helperText, sx: (0, commonStyles_1.getDefaultTextFieldSx)(styling), InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling), inputRef: setInputRef, InputProps: {
                                     ...params.InputProps,
                                     startAdornment,
+                                }, onKeyDown: (event) => {
+                                    handleKeyDown(event, () => {
+                                        if (!isControlledOpen) {
+                                            setOpen(false);
+                                        }
+                                        externalOnClose?.(event, "escape");
+                                    }, internalOpen);
                                 }, onChange: (e) => {
                                     if (isShowOptionsOnType) {
                                         setInputValue(e.target.value);
@@ -270,6 +283,9 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
                             if (withLabel) {
                                 onChange(newValue);
                                 formatValueForCustomOnChange(newValue, false);
+                                if (shouldCloseOnSelect || !multiple) {
+                                    maintainFocus();
+                                }
                                 return;
                             }
                             if (multiple && Array.isArray(newValue)) {
@@ -296,17 +312,26 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
                                 }
                                 onChange(mergedValues);
                                 formatValueForCustomOnChange(newValue, true, mergedValues);
+                                if (shouldCloseOnSelect) {
+                                    maintainFocus();
+                                }
                                 return;
                             }
                             if (typeof newValue === "string") {
                                 onChange(newValue ?? null);
                                 formatValueForCustomOnChange(newValue, false);
+                                if (shouldCloseOnSelect || !multiple) {
+                                    maintainFocus();
+                                }
                                 return;
                             }
                             const finalValue = newValue && !Array.isArray(newValue) ? newValue.value : null;
                             onChange(finalValue);
                             formatValueForCustomOnChange(newValue, false);
                             setLastSelectedValue(finalValue);
+                            if (shouldCloseOnSelect || !multiple) {
+                                maintainFocus();
+                            }
                         }, groupBy: (option) => option.heading ?? "", renderGroup: (params) => {
                             if (!params.group) {
                                 return (0, jsx_runtime_1.jsx)(material_1.Box, { children: params.children });

package/packages/shared-components/dist/FormFields/CheckBox/CheckBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.d.ts","sourceRoot":"","sources":["../../../src/FormFields/CheckBox/CheckBox.tsx"],"names":[],"mappings":"AAAA,OAAiB,EACf,KAAK,aAAa,IAAI,gBAAgB,EACvC,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAIzB,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACtE,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,wBAAgB,QAAQ,CAAC,CAAC,SAAS,WAAW,EAAE,EAC9C,IAAI,EACJ,KAAK,EACL,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,OAAe,EACf,GAAG,iBAAiB,EACrB,EAAE,aAAa,CAAC,CAAC,CAAC,2CAkBlB"}
+{"version":3,"file":"CheckBox.d.ts","sourceRoot":"","sources":["../../../src/FormFields/CheckBox/CheckBox.tsx"],"names":[],"mappings":"AAAA,OAAiB,EACf,KAAK,aAAa,IAAI,gBAAgB,EACvC,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAKzB,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACtE,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,wBAAgB,QAAQ,CAAC,CAAC,SAAS,WAAW,EAAE,EAC9C,IAAI,EACJ,KAAK,EACL,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,OAAe,EACf,GAAG,iBAAiB,EACrB,EAAE,aAAa,CAAC,CAAC,CAAC,2CAwBlB"}

package/packages/shared-components/dist/FormFields/CheckBox/CheckBox.js

@@ -7,12 +7,17 @@ exports.CheckBox = CheckBox;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
 const react_hook_form_1 = require("react-hook-form");
+const hooks_1 = require("../../utils/hooks");
 const CheckBox_styled_1 = require("./CheckBox.styled");
 const Skeleton_1 = require("./Skeleton");
 function CheckBox({ name, rules, control, defaultValue, size, loading = false, ...restCheckBoxProps }) {
-    const { field: { value = false, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
+    const { field: { value = false, onChange, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
+    const { maintainFocus } = (0, hooks_1.useFormFieldFocus)();
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {});
     }
-    return ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: (0, jsx_runtime_1.jsx)(CheckBox_styled_1.BoxStyled, { size: size }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_styled_1.CheckStyled, { size: size }), checked: value, ...restField, ...restCheckBoxProps }));
+    return ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: (0, jsx_runtime_1.jsx)(CheckBox_styled_1.BoxStyled, { size: size }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_styled_1.CheckStyled, { size: size }), checked: value, onChange: (event) => {
+            onChange(event.target.checked);
+            maintainFocus();
+        }, ...restField, ...restCheckBoxProps }));
 }

package/packages/shared-components/dist/FormFields/DatePicker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,KAAK,UAAU,EAAY,MAAM,eAAe,CAAC;AAC7E,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAE5F,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAG5E,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EACX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AASzB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACxE,kBAAkB,CAAC,eAAe,CAAC,GACnC,OAAO,CAAC;IACN,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC,CAAC,CAAC;AAEL,eAAO,MAAM,WAAW;;;CAGvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAcjC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAclC,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,SAAmC,EACnC,KAAK,EACL,oBAA4B,EAC5B,gBAAwB,EACxB,KAAgC,EAChC,MAAqC,EACrC,cAAc,EACd,OAAkB,EAClB,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CA2MpB"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,KAAK,UAAU,EAAY,MAAM,eAAe,CAAC;AAC7E,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAE5F,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAG5E,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EACX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAUzB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACxE,kBAAkB,CAAC,eAAe,CAAC,GACnC,OAAO,CAAC;IACN,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC,CAAC,CAAC;AAEL,eAAO,MAAM,WAAW;;;CAGvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAcjC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAclC,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,SAAmC,EACnC,KAAK,EACL,oBAA4B,EAC5B,gBAAwB,EACxB,KAAgC,EAChC,MAAqC,EACrC,cAAc,EACd,OAAkB,EAClB,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CAuNpB"}

package/packages/shared-components/dist/FormFields/DatePicker/DatePicker.js

@@ -15,6 +15,7 @@ const luxon_1 = require("luxon");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const Actions_1 = require("../../Actions");
+const hooks_1 = require("../../utils/hooks");
 const commonStyles_1 = require("../commonStyles");
 const Skeleton_1 = require("./Skeleton");
 exports.dateFormats = {
@@ -45,6 +46,7 @@ function DatePicker({ setError, control, defaultValue, disabled = false, label,
     const [localError, setLocalError] = (0, react_1.useState)();
     const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
     const [open, setOpen] = (0, react_1.useState)(false);
+    const { setInputRef, maintainFocus, maintainFocusAfterClose, handleKeyDown } = (0, hooks_1.useFormFieldFocus)(open);
     const theme = (0, material_1.useTheme)();
     const { iron, butterflyBlue, mirage } = theme.palette.app.color;
     const finalValue = (0, react_1.useMemo)(() => {
@@ -65,7 +67,10 @@ function DatePicker({ setError, control, defaultValue, disabled = false, label,
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, styling: styling });
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", ...containerProps, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { ...restField, ...restProps, disabled: disabled, views: views, format: format, value: finalValue, readOnly: readOnly, open: open && !readOnly, onOpen: () => setOpen(true), onClose: () => setOpen(false), slotProps: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", ...containerProps, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { ...restField, ...restProps, disabled: disabled, views: views, format: format, value: finalValue, readOnly: readOnly, open: open && !readOnly, onOpen: () => setOpen(true), onClose: () => {
+                    setOpen(false);
+                    maintainFocusAfterClose();
+                }, slotProps: {
                     field: {
                         clearable,
                         onClear: () => onChange(null),
@@ -82,6 +87,7 @@ function DatePicker({ setError, control, defaultValue, disabled = false, label,
                         required: styling === "default" ? required : undefined,
                         sx: (0, commonStyles_1.getDefaultTextFieldSx)(styling),
                         InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling),
+                        inputRef: setInputRef,
                         InputProps: {
                             endAdornment: ((0, jsx_runtime_1.jsx)(Actions_1.CalendarIconAction, { disabled: disabled, onClick: () => setOpen(true), showTooltip: false })),
                             sx: {
@@ -91,6 +97,7 @@ function DatePicker({ setError, control, defaultValue, disabled = false, label,
                             },
                         },
                         onKeyDown: (event) => {
+                            handleKeyDown(event, () => setOpen(false), open);
                             if (event.key === "Backspace" && clearable) {
                                 onChange(null);
                                 setLocalError(undefined);
@@ -160,6 +167,7 @@ function DatePicker({ setError, control, defaultValue, disabled = false, label,
                     if (setOnFinalChange && value?.isValid) {
                         onChange(value.toISODate());
                         setLocalError(undefined);
+                        maintainFocus();
                     }
                     restProps?.onAccept?.(value, details);
                 }, onChange: (value, details) => {
@@ -169,6 +177,7 @@ function DatePicker({ setError, control, defaultValue, disabled = false, label,
                     if (!value) {
                         onChange(null);
                         setLocalError(undefined);
+                        maintainFocus();
                         return;
                     }
                     const isValid = value?.isValid === true;
@@ -185,6 +194,7 @@ function DatePicker({ setError, control, defaultValue, disabled = false, label,
                                 message: errorMessage,
                             });
                         }
+                        maintainFocus();
                     });
                     restProps?.onChange?.(value, details);
                 } })] }));

package/packages/shared-components/dist/FormFields/DateTimePicker/DateTimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateTimePicker/DateTimePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,IAAI,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAExG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAc,EAAE,KAAK,YAAY,EAAY,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AASzB,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAC5E,sBAAsB,CAAC,eAAe,CAAC,GACvC,OAAO,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;IACV,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC,CAAC,CAAC;AAwCL,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,EACpD,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,SAAmC,EACnC,KAAK,EACL,MAA2B,EAC3B,UAAU,EACV,WAAW,EACX,gBAAoB,EACpB,OAAkB,EAClB,GAAG,SAAS,EACb,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CA+LxB"}
+{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateTimePicker/DateTimePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,IAAI,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAExG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAc,EAAY,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAUzB,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAC5E,sBAAsB,CAAC,eAAe,CAAC,GACvC,OAAO,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;IACV,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC,CAAC,CAAC;AAwCL,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,EACpD,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,SAAmC,EACnC,KAAK,EACL,MAA2B,EAC3B,UAAU,EACV,WAAW,EACX,gBAAoB,EACpB,OAAkB,EAClB,GAAG,SAAS,EACb,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CA6NxB"}

package/packages/shared-components/dist/FormFields/DateTimePicker/DateTimePicker.js

@@ -13,6 +13,7 @@ const luxon_1 = require("luxon");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const Actions_1 = require("../../Actions");
+const hooks_1 = require("../../utils/hooks");
 const commonStyles_1 = require("../commonStyles");
 const Skeleton_1 = require("./Skeleton");
 const hoverTextStyle = (color) => ({
@@ -41,6 +42,7 @@ const RightArrowIcon = () => {
 function DateTimePicker({ control, defaultValue, disabled = false, label, readOnly = false, name, error = false, helperText, loading = false, required = false, clearable = required ? false : true, rules, format = "dd-MM-yyyy HH:mm", helperIcon, toolTipText, timeStepsMinutes = 1, styling = "custom", ...restProps }) {
     const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
     const [open, setOpen] = (0, react_1.useState)(false);
+    const { setInputRef, maintainFocus, maintainFocusAfterClose, handleKeyDown } = (0, hooks_1.useFormFieldFocus)(open);
     if (error && value && typeof value === "object") {
         helperText = "Invalid time";
     }
@@ -53,10 +55,18 @@ function DateTimePicker({ control, defaultValue, disabled = false, label, readOn
         return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "350px" }, children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, styling: styling }) }));
     }
     const EmptyIcon = () => null;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "center", flexDirection: "row", gap: "5px", children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), helperIcon && toolTipText && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: toolTipText, placement: "bottom", children: helperIcon }))] })), (0, jsx_runtime_1.jsx)(DateTimePicker_1.DateTimePicker, { ...restField, ...restProps, disabled: disabled, readOnly: readOnly, open: open, ampm: false, value: pickerValue, timeSteps: { minutes: timeStepsMinutes }, format: format, onOpen: () => setOpen(true), onClose: () => setOpen(false), slotProps: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "center", flexDirection: "row", gap: "5px", children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), helperIcon && toolTipText && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: toolTipText, placement: "bottom", children: helperIcon }))] })), (0, jsx_runtime_1.jsx)(DateTimePicker_1.DateTimePicker, { ...restField, ...restProps, disabled: disabled, readOnly: readOnly, open: open, ampm: false, value: pickerValue, timeSteps: { minutes: timeStepsMinutes }, format: format, onOpen: () => {
+                    setOpen(true);
+                }, onClose: () => {
+                    setOpen(false);
+                    maintainFocusAfterClose();
+                }, slotProps: {
                     field: {
+                        inputRef: setInputRef,
                         clearable,
-                        onClear: () => onChange(null),
+                        onClear: () => {
+                            onChange(null);
+                        },
                     },
                     clearButton: {
                         tabIndex: -1,
@@ -67,6 +77,7 @@ function DateTimePicker({ control, defaultValue, disabled = false, label, readOn
                         error,
                         label: styling === "default" ? label : undefined,
                         required: styling === "default" ? required : undefined,
+                        inputRef: setInputRef,
                         InputProps: {
                             endAdornment: ((0, jsx_runtime_1.jsx)(Actions_1.CalendarIconAction, { showTooltip: false, disabled: disabled, onClick: () => setOpen(true) })),
                             sx: {
@@ -77,6 +88,14 @@ function DateTimePicker({ control, defaultValue, disabled = false, label, readOn
                         },
                         sx: (0, commonStyles_1.getDefaultTextFieldSx)(styling),
                         InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling),
+                        onKeyDown: (event) => {
+                            handleKeyDown(event, () => {
+                                setOpen(false);
+                            }, open);
+                            if (event.key === "Backspace" && clearable) {
+                                onChange(null);
+                            }
+                        },
                     },
                     popper: {
                         sx: {
@@ -165,8 +184,11 @@ function DateTimePicker({ control, defaultValue, disabled = false, label, readOn
                     switchViewIcon: EmptyIcon,
                 }, shouldDisableTime: () => !pickerValue, onChange: (value) => {
                     if (value?.isValid) {
-                        return onChange(value.toUTC().toISO());
+                        onChange(value.toUTC().toISO());
+                        maintainFocus();
+                        return;
                     }
                     onChange(value);
+                    maintainFocus();
                 } })] }));
 }

package/packages/shared-components/dist/FormFields/PhoneInputField/PhoneInputField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneInputField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/PhoneInputField/PhoneInputField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAI3D,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,IACpD,kBAAkB,CAAC,CAAC,CAAC,GACnB,IAAI,CAAC,eAAe,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEN,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EAAE,EACrD,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,KAAK,EACL,QAAgB,EAChB,QAAQ,EACR,IAAI,EACJ,OAAe,EACf,WAAgB,EAChB,KAAK,EACL,UAAU,EACV,GAAG,eAAe,EACnB,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAiFzB"}
+{"version":3,"file":"PhoneInputField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/PhoneInputField/PhoneInputField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAK3D,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,IACpD,kBAAkB,CAAC,CAAC,CAAC,GACnB,IAAI,CAAC,eAAe,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEN,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EAAE,EACrD,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,KAAK,EACL,QAAgB,EAChB,QAAQ,EACR,IAAI,EACJ,OAAe,EACf,WAAgB,EAChB,KAAK,EACL,UAAU,EACV,GAAG,eAAe,EACnB,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAmMzB"}

package/packages/shared-components/dist/FormFields/PhoneInputField/PhoneInputField.js

@@ -7,43 +7,123 @@ exports.PhoneInputField = PhoneInputField;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable sonarjs/no-nested-conditional */
 const material_1 = require("@mui/material");
+const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const react_phone_input_2_1 = __importDefault(require("react-phone-input-2"));
+const utils_1 = require("../../utils");
 const Skeleton_1 = require("./Skeleton");
 function PhoneInputField({ control, name, defaultValue, rules, label, disabled = false, required, rows, loading = false, placeholder = "", error, helperText, ...phoneInputProps }) {
     const theme = (0, material_1.useTheme)();
-    const { iron, red } = theme.palette.app.color;
+    const { iron, red, butterflyBlue } = theme.palette.app.color;
     const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({
         name,
         control,
         defaultValue,
         rules,
     });
+    const [dropdownOpen, setDropdownOpen] = (0, react_1.useState)(false);
+    const { setInputRef, maintainFocusAfterClose } = (0, utils_1.useFormFieldFocus)(dropdownOpen);
+    const containerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        const mainInput = container.querySelector("input[type='tel']");
+        if (mainInput) {
+            setInputRef(mainInput);
+            restField.ref(mainInput);
+        }
+        const checkDropdownState = () => {
+            const dropdown = container.querySelector(".flag-dropdown.open");
+            const isOpen = !!dropdown;
+            setDropdownOpen(isOpen);
+            if (isOpen) {
+                setTimeout(() => {
+                    const searchInput = container.querySelector(".country-list .search-box input");
+                    if (searchInput) {
+                        searchInput.focus();
+                    }
+                }, 0);
+            }
+        };
+        const observer = new MutationObserver(checkDropdownState);
+        observer.observe(container, {
+            attributes: true,
+            attributeFilter: ["class"],
+            subtree: true,
+            childList: true,
+        });
+        const handleClick = (e) => {
+            const target = e.target;
+            if (target.closest(".flag-dropdown") || target.closest(".country-list")) {
+                setTimeout(checkDropdownState, 0);
+            }
+        };
+        const handleClickOutside = (e) => {
+            const target = e.target;
+            if (!target.closest(".flag-dropdown") &&
+                !target.closest(".country-list")) {
+                setTimeout(checkDropdownState, 0);
+            }
+        };
+        container.addEventListener("click", handleClick);
+        document.addEventListener("click", handleClickOutside);
+        checkDropdownState();
+        return () => {
+            observer.disconnect();
+            container.removeEventListener("click", handleClick);
+            document.removeEventListener("click", handleClickOutside);
+        };
+    }, [setInputRef, restField]);
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, rows: rows });
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "4px", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsx)(react_phone_input_2_1.default, { country: "in", enableSearch: true, disabled: disabled, placeholder: placeholder || label, onChange: (phone) => {
-                            onChange(phone);
-                        }, value: value, containerStyle: {
-                            width: "100%",
-                            border: error
-                                ? `1px solid ${red[900]}`
-                                : disabled
-                                    ? `1px solid ${iron[700]}`
-                                    : `1px solid ${iron[800]}`,
-                            borderRadius: "4px",
-                        }, inputStyle: {
-                            width: "100%",
-                            paddingTop: "19px",
-                            paddingBottom: "19px",
-                            fontSize: "16px",
-                            border: "none",
-                            opacity: 1,
-                            color: disabled ? iron[100] : "revert-layer",
-                            background: disabled ? iron[50] : "revert-layer",
-                        }, buttonStyle: {
-                            border: "none",
-                        }, inputProps: { ...restField }, ...phoneInputProps })] }), error && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "4px", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsx)(material_1.Box, { ref: containerRef, sx: {
+                            "& .phone-input-container": {
+                                "&:focus-within": {
+                                    border: error
+                                        ? `2px solid ${red[900]} !important`
+                                        : `2px solid ${butterflyBlue[900]} !important`,
+                                },
+                            },
+                            "& .phone-input-field:focus": {
+                                "& ~ .flag-dropdown": {
+                                    borderColor: error ? red[900] : butterflyBlue[900],
+                                },
+                            },
+                            "& .flag-dropdown": {
+                                "&.open": {
+                                    borderColor: error ? red[900] : butterflyBlue[900],
+                                },
+                            },
+                        }, children: (0, jsx_runtime_1.jsx)(react_phone_input_2_1.default, { country: "in", enableSearch: true, disabled: disabled, placeholder: placeholder || label, onChange: (phone) => {
+                                onChange(phone);
+                            }, value: value, onBlur: () => {
+                                restField.onBlur();
+                                if (!dropdownOpen) {
+                                    maintainFocusAfterClose();
+                                }
+                            }, containerStyle: {
+                                width: "100%",
+                                border: error
+                                    ? `1px solid ${red[900]}`
+                                    : disabled
+                                        ? `1px solid ${iron[700]}`
+                                        : `1px solid ${iron[800]}`,
+                                borderRadius: "4px",
+                                transition: "all 0.2s ease",
+                            }, inputStyle: {
+                                width: "100%",
+                                paddingTop: "19px",
+                                paddingBottom: "19px",
+                                fontSize: "16px",
+                                border: "none",
+                                outline: "none",
+                                transition: "all 0.2s ease",
+                            }, containerClass: "phone-input-container", inputClass: "phone-input-field", buttonStyle: {
+                                border: "none",
+                            }, ...phoneInputProps }) })] }), error && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: {
                     color: "red",
                     whiteSpace: "pre",
                     textWrap: "wrap",

package/packages/shared-components/dist/FormFields/Rating/Ratting.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Ratting.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Rating/Ratting.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAElE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,EAAE,EACrE,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAU,EACV,KAAK,EACL,QAAQ,EACR,OAAe,EACf,SAAoB,EACpB,QAAgB,EAChB,GAAG,WAAW,EACf,EAAE,WAAW,CAAC,CAAC,CAAC,2CA2ChB"}
+{"version":3,"file":"Ratting.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Rating/Ratting.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGlE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,EAAE,EACrE,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAU,EACV,KAAK,EACL,QAAQ,EACR,OAAe,EACf,SAAoB,EACpB,QAAgB,EAChB,GAAG,WAAW,EACf,EAAE,WAAW,CAAC,CAAC,CAAC,2CA8ChB"}

package/packages/shared-components/dist/FormFields/Rating/Ratting.js

@@ -4,9 +4,11 @@ exports.Rating = Rating;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_hook_form_1 = require("react-hook-form");
+const utils_1 = require("../../utils");
 const Skeleton_1 = require("./Skeleton");
 function Rating({ control, name, defaultValue, label = "", rules, disabled, loading = false, direction = "column", required = false, ...ratingProps }) {
     const { field: { value, onChange, ...restField }, fieldState: { error }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
+    const { maintainFocus } = (0, utils_1.useFormFieldFocus)();
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.RatingSkeleton, { label: label });
     }
@@ -15,5 +17,6 @@ function Rating({ control, name, defaultValue, label = "", rules, disabled, load
                             marginBottom: direction === "row" ? 0 : "auto",
                         }, required: required, children: label })), (0, jsx_runtime_1.jsx)(material_1.Rating, { disabled: disabled, value: value ?? null, onChange: (event, newValue) => {
                             onChange(newValue);
+                            maintainFocus();
                         }, ...restField, ...ratingProps })] }), error && (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { error: true, children: error?.message })] }));
 }

package/packages/shared-components/dist/FormFields/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AAmBnE,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAUzB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACpE,IAAI,CACF,cAAc,EACd,MAAM,qBAAqB,CAAC,CAAC,CAAC,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CACnE,GAAG;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;IACxE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC,CAAC;AAEJ,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,EAAE,EAC5C,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,QAAgB,EAChB,OAAY,EACZ,KAAK,EACL,OAAe,EACf,UAAU,EACV,KAAK,EACL,WAAgB,EAChB,eAAsB,EACtB,YAAoB,EACpB,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,eAAmB,EACnB,gBAA0C,EAC1C,gBAAwB,EACxB,OAAkB,EAClB,GAAG,SAAS,EACb,EAAE,WAAW,CAAC,CAAC,CAAC,2CAmdhB"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AAmBnE,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAKzB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAQlD,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACpE,IAAI,CACF,cAAc,EACd,MAAM,qBAAqB,CAAC,CAAC,CAAC,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CACnE,GAAG;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;IACxE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC,CAAC;AAEJ,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,EAAE,EAC5C,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,QAAgB,EAChB,OAAY,EACZ,KAAK,EACL,OAAe,EACf,UAAU,EACV,KAAK,EACL,WAAgB,EAChB,eAAsB,EACtB,YAAoB,EACpB,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,eAAmB,EACnB,gBAA0C,EAC1C,gBAAwB,EACxB,OAAkB,EAClB,GAAG,SAAS,EACb,EAAE,WAAW,CAAC,CAAC,CAAC,2CAyehB"}

package/packages/shared-components/dist/FormFields/Select/Select.js

@@ -9,6 +9,7 @@ const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const Actions_1 = require("../../Actions");
 const Toast_1 = require("../../Toast");
+const utils_1 = require("../../utils");
 const CheckBox_styled_1 = require("../CheckBox/CheckBox.styled");
 const commonStyles_1 = require("../commonStyles");
 const Select_styled_1 = require("./Select.styled");
@@ -25,6 +26,8 @@ function Select({ control, defaultValue, name, required = false, label, multiple
     const disabledColor = disabled ? iron[900] : "revert-layer";
     const [pendingValue, setPendingValue] = (0, react_1.useState)(null);
     const hasPendingChange = (0, react_1.useRef)(false);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const { setInputRef, maintainFocusAfterClose, handleKeyDown } = (0, utils_1.useFormFieldFocus)(open);
     const handleSelectAll = (isSelected) => {
         if (isSelected) {
             const allValues = options
@@ -194,12 +197,20 @@ function Select({ control, defaultValue, name, required = false, label, multiple
                                         }
                                         onChange(newValue);
                                     }
+                                }, open: open, onOpen: () => {
+                                    setOpen(true);
                                 }, onClose: () => {
+                                    setOpen(false);
+                                    maintainFocusAfterClose();
                                     if (setOnFinalChange && hasPendingChange.current) {
                                         onChange(pendingValue);
                                         hasPendingChange.current = false;
                                         setPendingValue(null);
                                     }
+                                }, inputRef: setInputRef, onKeyDown: (event) => {
+                                    handleKeyDown(event, () => {
+                                        setOpen(false);
+                                    }, open);
                                 }, renderValue: restProps.renderValue ?? renderValue, 
                                 // eslint-disable-next-line sonarjs/no-unstable-nested-components
                                 IconComponent: (props) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {

package/packages/shared-components/dist/FormFields/SwitchField/SwitchField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/SwitchField/SwitchField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAEhE,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACzE,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,EACjD,IAAI,EACJ,KAAK,EACL,OAAO,EACP,YAAY,EACZ,OAAe,EACf,GAAG,eAAe,EACnB,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CA4DrB"}
+{"version":3,"file":"SwitchField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/SwitchField/SwitchField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAIzB,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACzE,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,EACjD,IAAI,EACJ,KAAK,EACL,OAAO,EACP,YAAY,EACZ,OAAe,EACf,GAAG,eAAe,EACnB,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAmErB"}

package/packages/shared-components/dist/FormFields/SwitchField/SwitchField.js

@@ -3,17 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwitchField = SwitchField;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const material_2 = require("@mui/material");
 const react_hook_form_1 = require("react-hook-form");
+const utils_1 = require("../../utils");
 const Skeleton_1 = require("./Skeleton");
 function SwitchField({ name, rules, control, defaultValue, loading = false, ...restSwitchProps }) {
-    const theme = (0, material_2.useTheme)();
+    const theme = (0, material_1.useTheme)();
     const { butterflyBlue, iron } = theme.palette.app.color;
     const { field: { value = false, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
+    const { setInputRef, maintainFocus } = (0, utils_1.useFormFieldFocus)();
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {});
     }
-    return ((0, jsx_runtime_1.jsx)(material_2.Switch, { checked: value, ...restField, ...restSwitchProps, sx: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Switch, { checked: value, ...restField, ...restSwitchProps, inputRef: setInputRef, onChange: (event) => {
+            restField.onChange(event);
+            maintainFocus();
+        }, sx: {
             padding: 1,
             "& .MuiSwitch-track": {
                 borderRadius: 11,

package/packages/shared-components/dist/FormFields/TextField/TextField.d.ts

@@ -22,6 +22,7 @@ export type TextFieldProps<P extends FieldValues> = UseControllerProps<P> & Omit
         message: string | null;
         regex: RegExp;
     };
+    customOnChange?: (value: string | null | number) => void;
 };
-export declare function TextField<P extends FieldValues>({ control, name, defaultValue, label, rules, type, required, disabled, loading, placeholder, isCapitalize, isTrimStartDisabled, rows, characterType, letterCase, setError, containerProps, styling, infoMessage, regexExpression, ...inputFieldProps }: TextFieldProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function TextField<P extends FieldValues>({ control, name, defaultValue, label, rules, type, required, disabled, loading, placeholder, isCapitalize, isTrimStartDisabled, rows, characterType, letterCase, setError, containerProps, styling, infoMessage, regexExpression, customOnChange, ...inputFieldProps }: TextFieldProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TextField.d.ts.map

package/packages/shared-components/dist/FormFields/TextField/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,IAAI,iBAAiB,EACxC,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAWzB,MAAM,MAAM,oBAAoB,GAC5B,QAAQ,GACR,eAAe,GACf,uBAAuB,GACvB,gBAAgB,GAChB,oBAAoB,GACpB,QAAQ,CAAC;AAEb,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,OAAO,CAAC;AAY7D,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACvE,IAAI,CAAC,iBAAiB,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,CACT,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,eAAe,CAAC,EAAE;QAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEJ,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,EAAE,EAC/C,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAU,EACV,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAe,EACf,WAAgB,EAChB,YAAoB,EACpB,mBAA2B,EAC3B,IAAI,EACJ,aAAuC,EACvC,UAAoB,EACpB,QAAQ,EACR,cAAc,EACd,OAAkB,EAClB,WAAW,EACX,eAGC,EACD,GAAG,eAAe,EACnB,EAAE,cAAc,CAAC,CAAC,CAAC,2CAoJnB"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,IAAI,iBAAiB,EACxC,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAYzB,MAAM,MAAM,oBAAoB,GAC5B,QAAQ,GACR,eAAe,GACf,uBAAuB,GACvB,gBAAgB,GAChB,oBAAoB,GACpB,QAAQ,CAAC;AAEb,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,OAAO,CAAC;AAY7D,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACvE,IAAI,CAAC,iBAAiB,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,CACT,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,eAAe,CAAC,EAAE;QAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;CAC1D,CAAC;AAEJ,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,EAAE,EAC/C,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAU,EACV,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAe,EACf,WAAgB,EAChB,YAAoB,EACpB,mBAA2B,EAC3B,IAAI,EACJ,aAAuC,EACvC,UAAoB,EACpB,QAAQ,EACR,cAAc,EACd,OAAkB,EAClB,WAAW,EACX,eAGC,EACD,cAAc,EACd,GAAG,eAAe,EACnB,EAAE,cAAc,CAAC,CAAC,CAAC,2CAiKnB"}

package/packages/shared-components/dist/FormFields/TextField/TextField.js

@@ -6,6 +6,7 @@ const material_1 = require("@mui/material");
 const react_hook_form_1 = require("react-hook-form");
 const icons_material_1 = require("@mui/icons-material");
 const Tooltip_1 = require("../../Tooltip");
+const hooks_1 = require("../../utils/hooks");
 const commonStyles_1 = require("../commonStyles");
 const Skeleton_1 = require("./Skeleton");
 const characterTypeMessages = {
@@ -19,8 +20,9 @@ const characterTypeMessages = {
 function TextField({ control, name, defaultValue, label = "", rules, type, required, disabled, loading = false, placeholder = "", isCapitalize = false, isTrimStartDisabled = false, rows, characterType = "string-number-special", letterCase = "mixed", setError, containerProps, styling = "custom", infoMessage, regexExpression = {
     message: null,
     regex: /^[\s\S]*$/,
-}, ...inputFieldProps }) {
+}, customOnChange, ...inputFieldProps }) {
     const { field: { value, onChange, ...restField }, fieldState: { error }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
+    const { inputRef, maintainFocus } = (0, hooks_1.useFormFieldFocus)();
     const handleKeyDown = (event) => {
         if (event.key === "-" && type === "number") {
             event.preventDefault();
@@ -70,7 +72,7 @@ function TextField({ control, name, defaultValue, label = "", rules, type, requi
     }
     return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { ...containerProps, gap: "5px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label }), infoMessage && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: infoMessage, children: (0, jsx_runtime_1.jsx)(icons_material_1.InfoOutlined, { sx: {
                                 fontSize: 13,
-                            } }) }))] })), (0, jsx_runtime_1.jsx)(material_1.TextField, { disabled: disabled, required: required, fullWidth: true, onKeyDown: handleKeyDown, placeholder: styling === "default" ? placeholder : placeholder || label, type: type, label: styling === "default" ? label : undefined, sx: (0, commonStyles_1.getDefaultTextFieldSx)(styling), InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling), inputProps: {
+                            } }) }))] })), (0, jsx_runtime_1.jsx)(material_1.TextField, { disabled: disabled, required: required, fullWidth: true, inputRef: inputRef, onKeyDown: handleKeyDown, placeholder: styling === "default" ? placeholder : placeholder || label, type: type, label: styling === "default" ? label : undefined, sx: (0, commonStyles_1.getDefaultTextFieldSx)(styling), InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling), inputProps: {
                     min: 0,
                 }, error: Boolean(error), helperText: error?.message, onChange: (event) => {
                     const input = event.target;
@@ -89,17 +91,22 @@ function TextField({ control, name, defaultValue, label = "", rules, type, requi
                             return;
                         }
                     }
+                    let finalValue = cleanedVal;
                     if (value && type === "number") {
-                        onChange(Number(value));
+                        finalValue = Number(value);
                     }
-                    else if (isCapitalize) {
-                        onChange(cleanedVal ? cleanedVal.toUpperCase() : null);
+                    else if (isCapitalize && cleanedVal) {
+                        finalValue = cleanedVal ? cleanedVal.toUpperCase() : null;
                     }
-                    else {
-                        onChange(cleanedVal);
+                    onChange(finalValue);
+                    if (customOnChange) {
+                        customOnChange(value);
                     }
                     requestAnimationFrame(() => {
-                        input.setSelectionRange(selectionStart, selectionEnd);
+                        if (type == "text") {
+                            input.setSelectionRange(selectionStart, selectionEnd);
+                        }
+                        maintainFocus();
                     });
                 }, value: typeof value === "string" ? value.trimStart() : (value ?? ""), ...restField, ...inputFieldProps })] }));
 }

package/packages/shared-components/dist/FormFields/TimeField/TimeField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TimeField/TimeField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAEL,KAAK,cAAc,IAAI,iBAAiB,EACzC,MAAM,+BAA+B,CAAC;AAEvC,OAAO,KAAK,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAQzB,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACvE,iBAAiB,CAAC,eAAe,CAAC,GAClC,OAAO,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,OAAO,CAAC;IAC3B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC,CAAC,CAAC;AAEL,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,EAAE,EAC/C,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,KAAK,EACL,MAAgB,EAChB,iBAAyB,EACzB,oBAA4B,EAC5B,OAAkB,EAClB,GAAG,SAAS,EACb,EAAE,cAAc,CAAC,CAAC,CAAC,2CAkFnB"}
+{"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TimeField/TimeField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAEL,KAAK,cAAc,IAAI,iBAAiB,EACzC,MAAM,+BAA+B,CAAC;AAEvC,OAAO,KAAK,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AASzB,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACvE,iBAAiB,CAAC,eAAe,CAAC,GAClC,OAAO,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,OAAO,CAAC;IAC3B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC,CAAC,CAAC;AAEL,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,EAAE,EAC/C,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,KAAK,EACL,MAAgB,EAChB,iBAAyB,EACzB,oBAA4B,EAC5B,OAAkB,EAClB,GAAG,SAAS,EACb,EAAE,cAAc,CAAC,CAAC,CAAC,2CA6FnB"}

package/packages/shared-components/dist/FormFields/TimeField/TimeField.js

@@ -6,10 +6,12 @@ const material_1 = require("@mui/material");
 const TimeField_1 = require("@mui/x-date-pickers/TimeField");
 const luxon_1 = require("luxon");
 const react_hook_form_1 = require("react-hook-form");
+const hooks_1 = require("../../utils/hooks");
 const commonStyles_1 = require("../commonStyles");
 const Skeleton_1 = require("./Skeleton");
 function TimeField({ control, defaultValue, disabled = false, label, name, error, helperText, loading = false, required = false, rules, format = "HH:mm", isReturnLocalTime = false, isReturnDateWithTime = false, styling = "custom", ...restProps }) {
     const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
+    const { inputRef, maintainFocus } = (0, hooks_1.useFormFieldFocus)();
     const theme = (0, material_1.useTheme)();
     const { butterflyBlue } = theme.palette.app.color;
     if (error && value && typeof value === "object") {
@@ -24,15 +26,21 @@ function TimeField({ control, defaultValue, disabled = false, label, name, error
     return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsx)(TimeField_1.TimeField, { ...restField, ...restProps, disabled: disabled, value: pickerValue, onChange: (value) => {
                     if (value?.isValid) {
                         if (isReturnLocalTime) {
-                            return onChange(value.toFormat(format));
+                            onChange(value.toFormat(format));
+                            maintainFocus();
+                            return;
                         }
                         if (isReturnDateWithTime) {
-                            return onChange(value.toUTC().toISO());
+                            onChange(value.toUTC().toISO());
+                            maintainFocus();
+                            return;
                         }
                         onChange(value.toUTC().toISOTime());
+                        maintainFocus();
                     }
                     else {
                         onChange(value);
+                        maintainFocus();
                     }
                 }, slotProps: {
                     textField: {
@@ -41,6 +49,7 @@ function TimeField({ control, defaultValue, disabled = false, label, name, error
                         error,
                         label: styling === "default" ? label : undefined,
                         required: styling === "default" ? required : undefined,
+                        inputRef,
                         InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling),
                         sx: {
                             ...(0, commonStyles_1.getDefaultTextFieldSx)(styling),

package/packages/shared-components/dist/FormFields/TimePicker/TimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAE5F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,EAAE,KAAK,YAAY,EAAY,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAQzB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACxE,kBAAkB,CAAC,eAAe,CAAC,GACnC,OAAO,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC,CAAC,CAAC;AAEL,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,KAAK,EACL,MAAgB,EAChB,iBAAyB,EACzB,oBAA4B,EAC5B,gBAAoB,EACpB,UAAU,EACV,WAAW,EACX,cAAc,EACd,OAAkB,EAClB,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CA6HpB"}
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAE5F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,EAAE,KAAK,YAAY,EAAY,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AASzB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACxE,kBAAkB,CAAC,eAAe,CAAC,GACnC,OAAO,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC,CAAC,CAAC;AAEL,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,KAAK,EACL,MAAgB,EAChB,iBAAyB,EACzB,oBAA4B,EAC5B,gBAAoB,EACpB,UAAU,EACV,WAAW,EACX,cAAc,EACd,OAAkB,EAClB,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CA+IpB"}

package/packages/shared-components/dist/FormFields/TimePicker/TimePicker.js

@@ -7,11 +7,13 @@ const TimePicker_1 = require("@mui/x-date-pickers/TimePicker");
 const luxon_1 = require("luxon");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
+const hooks_1 = require("../../utils/hooks");
 const commonStyles_1 = require("../commonStyles");
 const Skeleton_1 = require("./Skeleton");
 function TimePicker({ control, defaultValue, disabled = false, label, readOnly = false, name, error = false, helperText, loading = false, required = false, rules, format = "HH:mm", isReturnLocalTime = false, isReturnDateWithTime = false, timeStepsMinutes = 1, helperIcon, toolTipText, containerProps, styling = "custom", ...restProps }) {
     const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
     const [open, setOpen] = (0, react_1.useState)(false);
+    const { setInputRef, maintainFocus, maintainFocusAfterClose, handleKeyDown } = (0, hooks_1.useFormFieldFocus)(open);
     if (error && value && typeof value === "object") {
         helperText = "Invalid time";
     }
@@ -23,13 +25,17 @@ function TimePicker({ control, defaultValue, disabled = false, label, readOnly =
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, styling: styling });
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", ...containerProps, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "center", flexDirection: "row", gap: "5px", children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label }), helperIcon && toolTipText && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: toolTipText, placement: "bottom", children: helperIcon }))] })), (0, jsx_runtime_1.jsx)(TimePicker_1.TimePicker, { ...restField, ...restProps, disabled: disabled, readOnly: readOnly, open: open, ampm: false, value: pickerValue, format: format, onOpen: () => setOpen(true), onClose: () => setOpen(false), timeSteps: { minutes: timeStepsMinutes }, slotProps: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", ...containerProps, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "center", flexDirection: "row", gap: "5px", children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label }), helperIcon && toolTipText && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: toolTipText, placement: "bottom", children: helperIcon }))] })), (0, jsx_runtime_1.jsx)(TimePicker_1.TimePicker, { ...restField, ...restProps, disabled: disabled, readOnly: readOnly, open: open, ampm: false, value: pickerValue, format: format, onOpen: () => setOpen(true), onClose: () => {
+                    setOpen(false);
+                    maintainFocusAfterClose();
+                }, timeSteps: { minutes: timeStepsMinutes }, slotProps: {
                     textField: {
                         disabled,
                         helperText,
                         error,
                         label: styling === "default" ? label : undefined,
                         required: styling === "default" ? required : undefined,
+                        inputRef: setInputRef,
                         InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling),
                         sx: {
                             ...(0, commonStyles_1.getDefaultTextFieldSx)(styling),
@@ -39,6 +45,9 @@ function TimePicker({ control, defaultValue, disabled = false, label, readOnly =
                                 borderRadius: "5px",
                             },
                         },
+                        onKeyDown: (event) => {
+                            handleKeyDown(event, () => setOpen(false), open);
+                        },
                     },
                     popper: {
                         sx: {
@@ -76,15 +85,21 @@ function TimePicker({ control, defaultValue, disabled = false, label, readOnly =
                 }, onChange: (value) => {
                     if (value?.isValid) {
                         if (isReturnLocalTime) {
-                            return onChange(value.toFormat(format));
+                            onChange(value.toFormat(format));
+                            maintainFocus();
+                            return;
                         }
                         if (isReturnDateWithTime) {
-                            return onChange(value.toUTC().toISO());
+                            onChange(value.toUTC().toISO());
+                            maintainFocus();
+                            return;
                         }
                         onChange(value.toUTC().toISOTime());
+                        maintainFocus();
                     }
                     else {
                         onChange(value);
+                        maintainFocus();
                     }
                 } })] }));
 }

package/packages/shared-components/dist/SmartGrid/exportUtils/helper.js

@@ -46,7 +46,7 @@ const formatCellForExcel = (value, rowType, isGroupingColumn) => {
     if (rowType !== "data" && value === "") {
         return "";
     }
-    if (!value) {
+    if (value === null || value == undefined || value === "") {
         return isGroupingColumn ? "" : "-";
     }
     if (typeof value === "boolean") {

package/packages/shared-components/dist/utils/hooks/index.d.ts

@@ -1,4 +1,5 @@
+export * from "./useDialogActions";
+export * from "./useFormFieldFocus";
 export * from "./useGetDeviceType";
 export * from "./useGlobalKeyboardShortcut";
-export * from "./useDialogActions";
 //# sourceMappingURL=index.d.ts.map

package/packages/shared-components/dist/utils/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,6BAA6B,CAAC"}

package/packages/shared-components/dist/utils/hooks/index.js

@@ -14,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useDialogActions"), exports);
+__exportStar(require("./useFormFieldFocus"), exports);
 __exportStar(require("./useGetDeviceType"), exports);
 __exportStar(require("./useGlobalKeyboardShortcut"), exports);
-__exportStar(require("./useDialogActions"), exports);

package/packages/shared-components/dist/utils/hooks/useFormFieldFocus.d.ts

@@ -0,0 +1,8 @@
+export declare function useFormFieldFocus(isOpen?: boolean | undefined): {
+    inputRef: import("react").MutableRefObject<HTMLInputElement | null>;
+    setInputRef: (ref: HTMLInputElement | null) => void;
+    maintainFocus: () => void;
+    maintainFocusAfterClose: () => void;
+    handleKeyDown: <T extends HTMLElement = HTMLElement>(event: React.KeyboardEvent<T>, onClose?: () => void, isPopupOpen?: boolean) => void;
+};
+//# sourceMappingURL=useFormFieldFocus.d.ts.map

package/packages/shared-components/dist/utils/hooks/useFormFieldFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormFieldFocus.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/useFormFieldFocus.ts"],"names":[],"mappings":"AAEA,wBAAgB,iBAAiB,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS;;uBA6CtB,gBAAgB,GAAG,IAAI;;;oBAf1D,CAAC,SAAS,WAAW,uBACb,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,YACnB,MAAM,IAAI,gBACN,OAAO;EAyB1B"}

package/packages/shared-components/dist/utils/hooks/useFormFieldFocus.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormFieldFocus = useFormFieldFocus;
+const react_1 = require("react");
+function useFormFieldFocus(isOpen) {
+    const inputRef = (0, react_1.useRef)(null);
+    const shouldMaintainFocusRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (!isOpen && shouldMaintainFocusRef.current && inputRef.current) {
+            shouldMaintainFocusRef.current = false;
+            setTimeout(() => {
+                requestAnimationFrame(() => {
+                    if (inputRef.current) {
+                        inputRef.current.focus();
+                    }
+                });
+            }, 10);
+        }
+    }, [isOpen]);
+    const maintainFocus = (0, react_1.useCallback)(() => {
+        requestAnimationFrame(() => {
+            inputRef.current?.focus();
+        });
+    }, []);
+    const maintainFocusAfterClose = (0, react_1.useCallback)(() => {
+        shouldMaintainFocusRef.current = true;
+    }, []);
+    const handleKeyDown = (0, react_1.useCallback)((event, onClose, isPopupOpen) => {
+        if (isPopupOpen && (event.key === "Tab" || event.key === "Escape")) {
+            event.preventDefault();
+            event.stopPropagation();
+            onClose?.();
+            maintainFocusAfterClose();
+        }
+    }, [maintainFocusAfterClose]);
+    const setInputRef = (0, react_1.useCallback)((ref) => {
+        if (ref) {
+            inputRef.current = ref;
+        }
+    }, []);
+    return {
+        inputRef,
+        setInputRef,
+        maintainFocus,
+        maintainFocusAfterClose,
+        handleKeyDown,
+    };
+}