@codezee/sixtify-brahma 0.2.176 → 0.2.177

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

@@ -0,0 +1,227 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DecimalTextField = DecimalTextField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const react_number_format_1 = require("react-number-format");
+const Tooltip_1 = require("../../Tooltip");
+const useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
+const commonStyles_1 = require("../commonStyles");
+const Skeleton_1 = require("../TextField/Skeleton");
+function DecimalTextField({ control, name, decimalScale, defaultFallbackValue = 0, min, max, defaultValue, label = "", required, disabled, loading = false, placeholder = "", containerProps, styling = "custom", infoMessage, customOnChange, navigationKey = "tab", ...restProps }) {
+    const { field: { value, onChange: formOnChange, onBlur: formOnBlur, ref }, fieldState: { error }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue });
+    const { inputRef: navigationInputRef, maintainFocus, handleKeyDown: handleNavigationKeyDown, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ navigationKey });
+    const inputRef = (0, react_1.useRef)(null);
+    const isInitializedRef = (0, react_1.useRef)(false);
+    const formatNumber = (0, react_1.useCallback)((num) => {
+        return num.toFixed(decimalScale);
+    }, [decimalScale]);
+    const parseValue = (0, react_1.useCallback)((val) => {
+        if (typeof val === "string") {
+            const parsed = parseFloat(val);
+            return isNaN(parsed) ? null : parsed;
+        }
+        if (typeof val === "number" && !isNaN(val)) {
+            return val;
+        }
+        return null;
+    }, []);
+    const getValidInitialValue = (0, react_1.useMemo)(() => {
+        return (fallback) => {
+            let candidateValue = fallback ?? 0;
+            if (min !== undefined && candidateValue < min) {
+                candidateValue = min;
+            }
+            if (max !== undefined && candidateValue > max) {
+                candidateValue = max;
+            }
+            return candidateValue;
+        };
+    }, [min, max]);
+    const isValidValue = (0, react_1.useCallback)((val) => {
+        return (!isNaN(val) &&
+            (min === undefined || val >= min) &&
+            (max === undefined || val <= max));
+    }, [min, max]);
+    // eslint-disable-next-line sonarjs/cognitive-complexity
+    (0, react_1.useEffect)(() => {
+        if (isInitializedRef.current) {
+            return;
+        }
+        const currentNumericValue = parseValue(value);
+        let initialValue = null;
+        const isDefaultZero = currentNumericValue === 0 &&
+            (defaultValue === undefined ||
+                defaultValue === null ||
+                defaultValue === "");
+        if (currentNumericValue !== null &&
+            isValidValue(currentNumericValue) &&
+            !isDefaultZero) {
+            initialValue = currentNumericValue;
+        }
+        else if (defaultValue !== undefined &&
+            defaultValue !== null &&
+            defaultValue !== "") {
+            const parsedDefault = typeof defaultValue === "number"
+                ? defaultValue
+                : parseValue(defaultValue);
+            if (parsedDefault !== null) {
+                initialValue = getValidInitialValue(parsedDefault);
+            }
+        }
+        if (initialValue === null) {
+            if (defaultFallbackValue != undefined && defaultFallbackValue != null) {
+                initialValue = getValidInitialValue(defaultFallbackValue);
+            }
+        }
+        if (initialValue !== null) {
+            const formattedValue = formatNumber(initialValue);
+            if (value !== formattedValue) {
+                formOnChange(formattedValue);
+            }
+        }
+        isInitializedRef.current = true;
+    }, []);
+    const handleValueChange = (0, react_1.useCallback)((values) => {
+        const numericValue = values.floatValue;
+        formOnChange(values.value);
+        if (customOnChange && numericValue !== undefined) {
+            customOnChange(numericValue);
+        }
+        maintainFocus();
+    }, [formOnChange, customOnChange, maintainFocus]);
+    const handleBlur = (0, react_1.useCallback)((event) => {
+        const currentValue = parseValue(value);
+        if (currentValue === null || !isValidValue(currentValue)) {
+            let resetValue;
+            if (defaultFallbackValue != undefined &&
+                isValidValue(defaultFallbackValue)) {
+                resetValue = defaultFallbackValue;
+            }
+            else if (min !== undefined) {
+                resetValue = min;
+            }
+            else {
+                resetValue = 0;
+            }
+            const formattedValue = formatNumber(resetValue);
+            formOnChange(formattedValue);
+            if (customOnChange) {
+                customOnChange(resetValue);
+            }
+        }
+        else {
+            const formattedValue = formatNumber(currentValue);
+            formOnChange(formattedValue);
+        }
+        formOnBlur();
+        if (restProps.onBlur) {
+            restProps.onBlur(event);
+        }
+    }, [
+        value,
+        isValidValue,
+        min,
+        defaultFallbackValue,
+        formOnChange,
+        formOnBlur,
+        customOnChange,
+        formatNumber,
+        parseValue,
+        restProps,
+    ]);
+    const handleFocus = (0, react_1.useCallback)((event) => {
+        if (restProps.onFocus) {
+            restProps.onFocus(event);
+        }
+    }, [value, isValidValue, parseValue, restProps]);
+    const handleKeyDown = (0, react_1.useCallback)(
+    // eslint-disable-next-line sonarjs/cognitive-complexity
+    (event) => {
+        // Handle arrow keys for increment/decrement
+        if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+            event.preventDefault();
+            const currentValue = parseValue(value) ?? getValidInitialValue(defaultFallbackValue);
+            const step = 1 / Math.pow(10, decimalScale);
+            let newValue;
+            if (event.key === "ArrowUp") {
+                newValue = currentValue + step;
+            }
+            else {
+                newValue = currentValue - step;
+            }
+            if (min !== undefined && newValue < min) {
+                newValue = min;
+            }
+            if (max !== undefined && newValue > max) {
+                newValue = max;
+            }
+            if (isValidValue(newValue)) {
+                const formattedValue = formatNumber(newValue);
+                formOnChange(formattedValue);
+                if (customOnChange) {
+                    customOnChange(newValue);
+                }
+                maintainFocus();
+            }
+            return;
+        }
+        // Handle navigation keys (Tab/Enter)
+        handleNavigationKeyDown(event, undefined, false);
+        if (restProps.onKeyDown) {
+            restProps.onKeyDown(event);
+        }
+    }, [
+        value,
+        parseValue,
+        getValidInitialValue,
+        defaultFallbackValue,
+        decimalScale,
+        min,
+        max,
+        isValidValue,
+        formatNumber,
+        formOnChange,
+        customOnChange,
+        maintainFocus,
+        handleNavigationKeyDown,
+        restProps,
+    ]);
+    const handleInputRef = (0, react_1.useCallback)((el) => {
+        inputRef.current = el;
+        navigationInputRef.current = el;
+        if (ref) {
+            if (typeof ref === "function") {
+                ref(el);
+            }
+            else {
+                ref.current = el;
+            }
+        }
+    }, [ref, navigationInputRef]);
+    // eslint-disable-next-line sonarjs/function-return-type
+    const displayValue = (0, react_1.useMemo)(() => {
+        const numericValue = parseValue(value);
+        if (numericValue !== null) {
+            if (typeof value === "string" && value.includes(".")) {
+                const parts = value.split(".");
+                if (parts[1] && parts[1].length <= decimalScale) {
+                    return value;
+                }
+            }
+            return numericValue;
+        }
+        return "";
+    }, [value, parseValue, decimalScale]);
+    if (loading) {
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, styling: styling });
+    }
+    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", alignItems: "center", gap: "4px", children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { 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)(react_number_format_1.NumericFormat, { customInput: material_1.TextField, ...restProps, disabled: disabled, required: required, fullWidth: true, placeholder: styling === "default" ? placeholder : placeholder || label, label: styling === "default" ? label : undefined, sx: (0, commonStyles_1.getDefaultTextFieldSx)(styling), InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling), inputProps: {
+                    ...restProps.inputProps,
+                }, error: Boolean(error), helperText: error?.message, name: name, decimalScale: decimalScale, fixedDecimalScale: true, allowNegative: false, thousandSeparator: false, value: displayValue, onValueChange: handleValueChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, inputMode: "decimal", getInputRef: handleInputRef })] }));
+}

package/packages/shared-components/dist/FormFields/DecimalTextField/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./DecimalTextField";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DecimalTextField/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/packages/shared-components/dist/FormFields/DecimalTextField/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./DecimalTextField"), exports);

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

@@ -22,7 +22,7 @@ function FileUpload({ loading = false, onChange, isDisabled, multiple = false, r
     const theme = (0, material_1.useTheme)();
     const { red, iron, black, butterflyBlue } = theme.palette.app.color;
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { inputRef, setInputRef } = (0, useFormFieldFocus_1.useFormFieldFocus)();
+    const { inputRef, setInputRef } = (0, useFormFieldFocus_1.useFormFieldFocus)({ navigationKey: "tab" });
     const dragCounter = (0, react_1.useRef)(0);
     const rafRef = (0, react_1.useRef)(null);
     const animStartRef = (0, react_1.useRef)(null);

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

@@ -1 +1 @@
-{"version":3,"file":"ImageUpload.d.ts","sourceRoot":"","sources":["../../../src/FormFields/ImageUpload/ImageUpload.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAKlD,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACtC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AASH,wBAAgB,WAAW,CAAC,EAC1B,OAAkB,EAClB,WAAmB,EACnB,YAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,SAAiB,EACjB,OAAe,EACf,IAAQ,EACR,QAAiC,GAClC,EAAE,gBAAgB,2CAuMlB"}
+{"version":3,"file":"ImageUpload.d.ts","sourceRoot":"","sources":["../../../src/FormFields/ImageUpload/ImageUpload.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAKlD,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACtC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AASH,wBAAgB,WAAW,CAAC,EAC1B,OAAkB,EAClB,WAAmB,EACnB,YAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,SAAiB,EACjB,OAAe,EACf,IAAQ,EACR,QAAiC,GAClC,EAAE,gBAAgB,2CAwMlB"}

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

@@ -24,7 +24,9 @@ function ImageUpload({ variant = "square", isUploading = false, defaultValue = "
     const { t } = (0, react_i18next_1.useTranslation)();
     const [hover, setHover] = (0, react_1.useState)(false);
     const [isOpenCaptureModal, setIsOpenCaptureModal] = (0, react_1.useState)(false);
-    const { inputRef, setInputRef, maintainFocusAfterClose } = (0, useFormFieldFocus_1.useFormFieldFocus)(isOpenCaptureModal);
+    const { inputRef, setInputRef, maintainFocusAfterClose } = (0, useFormFieldFocus_1.useFormFieldFocus)({
+        isOpen: isOpenCaptureModal,
+    });
     const theme = (0, material_1.useTheme)();
     const { butterflyBlue, iron } = theme.palette.app.color;
     const handleFileChange = (event) => {

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

@@ -1,5 +1,6 @@
 import { type ControllerRenderProps, type FieldValues, type UseControllerProps } from "react-hook-form";
 import type { PhoneInputProps } from "react-phone-input-2";
+import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
 export type PhoneInputFieldProps<P extends FieldValues> = UseControllerProps<P> & Omit<PhoneInputProps, keyof ControllerRenderProps<P>> & {
     label?: string;
     loading?: boolean;
@@ -7,6 +8,7 @@ export type PhoneInputFieldProps<P extends FieldValues> = UseControllerProps<P>
     required?: boolean;
     error?: boolean;
     helperText?: string;
+    navigationKey?: NavigationKey;
 };
-export declare function PhoneInputField<P extends FieldValues>({ control, name, defaultValue, rules, label, disabled, required, rows, loading, placeholder, error, helperText, ...phoneInputProps }: PhoneInputFieldProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function PhoneInputField<P extends FieldValues>({ control, name, defaultValue, rules, label, disabled, required, rows, loading, placeholder, error, helperText, navigationKey, ...phoneInputProps }: PhoneInputFieldProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PhoneInputField.d.ts.map

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":"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,2CAkNzB"}
+{"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;AAE3D,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAG7C,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;IACpB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,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,aAAqB,EACrB,GAAG,eAAe,EACnB,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAuNzB"}

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

@@ -10,9 +10,9 @@ 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 useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
 const Skeleton_1 = require("./Skeleton");
-function PhoneInputField({ control, name, defaultValue, rules, label, disabled = false, required, rows, loading = false, placeholder = "", error, helperText, ...phoneInputProps }) {
+function PhoneInputField({ control, name, defaultValue, rules, label, disabled = false, required, rows, loading = false, placeholder = "", error, helperText, navigationKey = "tab", ...phoneInputProps }) {
     const theme = (0, material_1.useTheme)();
     const { iron, red, butterflyBlue, slate } = theme.palette.app.color;
     const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({
@@ -22,7 +22,7 @@ function PhoneInputField({ control, name, defaultValue, rules, label, disabled =
         rules,
     });
     const [dropdownOpen, setDropdownOpen] = (0, react_1.useState)(false);
-    const { setInputRef, maintainFocusAfterClose } = (0, utils_1.useFormFieldFocus)(dropdownOpen);
+    const { setInputRef, maintainFocusAfterClose, handleKeyDown } = (0, useFormFieldFocus_1.useFormFieldFocus)({ isOpen: dropdownOpen, navigationKey });
     const containerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const container = containerRef.current;
@@ -119,6 +119,10 @@ function PhoneInputField({ control, name, defaultValue, rules, label, disabled =
                                 if (!dropdownOpen) {
                                     maintainFocusAfterClose();
                                 }
+                            }, onKeyDown: (event) => {
+                                if (!dropdownOpen) {
+                                    handleKeyDown(event, undefined, false);
+                                }
                             }, containerStyle: {
                                 width: "100%",
                                 border: error

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

@@ -2,6 +2,7 @@ import { type StackOwnProps, type StackProps, type SxProps } from "@mui/material
 import { type RadioProps as MuiRadioProps } from "@mui/material/Radio";
 import type { ReactNode } from "react";
 import { type ControllerRenderProps, type FieldValues, type UseControllerProps } from "react-hook-form";
+import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
 type Options = {
     values: boolean | string;
     label?: ReactNode;
@@ -17,7 +18,8 @@ export type RadioGroupFieldProps<P extends FieldValues> = UseControllerProps<P>
     sx?: SxProps;
     isHorizontal?: boolean;
     containerProps?: StackProps;
+    navigationKey?: NavigationKey;
 };
-export declare function RadioGroupField<P extends FieldValues>({ name, rules, label, control, options, defaultValue, size, color, loading, required, direction, sx, containerProps, isHorizontal, ...restRadioButtonProps }: RadioGroupFieldProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function RadioGroupField<P extends FieldValues>({ name, rules, label, control, options, defaultValue, size, color, loading, required, direction, sx, containerProps, isHorizontal, navigationKey, ...restRadioButtonProps }: RadioGroupFieldProps<P>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=RadioGroupField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroupField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/RadioGroupField/RadioGroupField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,OAAO,EACb,MAAM,eAAe,CAAC;AACvB,OAAc,EAAE,KAAK,UAAU,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC9E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAGzB,KAAK,OAAO,GAAG;IACb,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,IACpD,kBAAkB,CAAC,CAAC,CAAC,GACnB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,UAAU,CAAC;CAC7B,CAAC;AAEN,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EAAE,EACrD,IAAI,EACJ,KAAK,EACL,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAY,EACZ,IAAc,EACd,KAAmB,EACnB,OAAe,EACf,QAAgB,EAChB,SAAiB,EACjB,EAAO,EACP,cAAc,EACd,YAAoB,EACpB,GAAG,oBAAoB,EACxB,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAwEzB"}
+{"version":3,"file":"RadioGroupField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/RadioGroupField/RadioGroupField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,OAAO,EACb,MAAM,eAAe,CAAC;AACvB,OAAc,EAAE,KAAK,UAAU,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC9E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAG7C,KAAK,OAAO,GAAG;IACb,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,IACpD,kBAAkB,CAAC,CAAC,CAAC,GACnB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAEN,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EAAE,EACrD,IAAI,EACJ,KAAK,EACL,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAY,EACZ,IAAc,EACd,KAAmB,EACnB,OAAe,EACf,QAAgB,EAChB,SAAiB,EACjB,EAAO,EACP,cAAc,EACd,YAAoB,EACpB,aAAqB,EACrB,GAAG,oBAAoB,EACxB,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAwGzB"}

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

@@ -8,9 +8,27 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const Radio_1 = __importDefault(require("@mui/material/Radio"));
 const react_hook_form_1 = require("react-hook-form");
+const useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
 const Skeleton_1 = require("./Skeleton");
-function RadioGroupField({ name, rules, label, control, options, defaultValue, size = "small", color = "secondary", loading = false, required = false, direction = "row", sx = {}, containerProps, isHorizontal = false, ...restRadioButtonProps }) {
-    const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
+function RadioGroupField({ name, rules, label, control, options, defaultValue, size = "small", color = "secondary", loading = false, required = false, direction = "row", sx = {}, containerProps, isHorizontal = false, navigationKey = "tab", ...restRadioButtonProps }) {
+    const { field: { value, onChange, ref, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
+    const { inputRef, handleKeyDown: handleNavigationKeyDown, maintainFocus, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ navigationKey });
+    const handleKeyDown = (event) => {
+        handleNavigationKeyDown(event, undefined, false);
+    };
+    const handleRadioChange = (event) => {
+        const newValue = event.target.value;
+        if (newValue === "true") {
+            onChange(true);
+        }
+        else if (newValue === "false") {
+            onChange(false);
+        }
+        else {
+            onChange(newValue);
+        }
+        maintainFocus();
+    };
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {});
     }
@@ -18,19 +36,21 @@ function RadioGroupField({ name, rules, label, control, options, defaultValue, s
                     whiteSpace: "normal",
                     overflow: "visible",
                     textOverflow: "unset",
-                }, required: required, disabled: restRadioButtonProps.disabled, children: label })), (0, jsx_runtime_1.jsx)(material_1.RadioGroup, { name: name, value: value, onChange: (_, event) => {
-                    if (event === "true") {
-                        onChange(true);
-                    }
-                    else if (event === "false") {
-                        onChange(false);
-                    }
-                    else {
-                        onChange(event);
-                    }
-                }, children: (0, jsx_runtime_1.jsx)(material_1.Stack, { gap: direction === "column" ? "5px" : "10px", direction: direction, ...containerProps, children: options?.map(({ label, values, disabled }, index) => {
+                }, required: required, disabled: restRadioButtonProps.disabled, children: label })), (0, jsx_runtime_1.jsx)(material_1.RadioGroup, { name: name, value: value, onChange: handleRadioChange, onKeyDown: handleKeyDown, children: (0, jsx_runtime_1.jsx)(material_1.Stack, { gap: direction === "column" ? "5px" : "10px", direction: direction, ...containerProps, children: options?.map(({ label, values, disabled }, index) => {
                         return (
                         // eslint-disable-next-line sonarjs/no-array-index-key
-                        (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { value: values, control: (0, jsx_runtime_1.jsx)(Radio_1.default, { ...restField, ...restRadioButtonProps, color: color, size: size }), disabled: disabled, label: label, sx: sx }) }, index));
+                        (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { value: values, control: (0, jsx_runtime_1.jsx)(Radio_1.default, { ...restField, ...restRadioButtonProps, color: color, size: size, inputRef: (el) => {
+                                        if (el && !inputRef.current) {
+                                            inputRef.current = el;
+                                            if (ref) {
+                                                if (typeof ref === "function") {
+                                                    ref(el);
+                                                }
+                                                else {
+                                                    ref.current = el;
+                                                }
+                                            }
+                                        }
+                                    } }), disabled: disabled, label: label, sx: sx }) }, index));
                     }) }) })] }));
 }

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

@@ -8,7 +8,7 @@ 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)();
+    const { maintainFocus } = (0, utils_1.useFormFieldFocus)({});
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.RatingSkeleton, { label: label });
     }

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

@@ -1,5 +1,6 @@
 import type { SelectProps as MuiSelectProps } from "@mui/material";
 import { type ControllerRenderProps, type FieldValues, type UseControllerProps } from "react-hook-form";
+import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
 import type { OnAction } from "../../utils/types";
 export type SelectOption = {
     heading?: string;
@@ -28,6 +29,7 @@ export type SelectProps<P extends FieldValues> = UseControllerProps<P> & Omit<Mu
     disableClearable?: boolean;
     setOnFinalChange?: boolean;
     styling?: "custom" | "default";
+    navigationKey?: NavigationKey;
 };
-export declare function Select<P extends FieldValues>({ control, defaultValue, name, required, label, multiple, disabled, options, rules, loading, helperText, error, placeholder, isShowSelectAll, isShowAvatar, onAction, renderOption, maxLimit, maxDisplayItems, disableClearable, setOnFinalChange, styling, ...restProps }: SelectProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function Select<P extends FieldValues>({ control, defaultValue, name, required, label, multiple, disabled, options, rules, loading, helperText, error, placeholder, isShowSelectAll, isShowAvatar, onAction, renderOption, maxLimit, maxDisplayItems, disableClearable, setOnFinalChange, styling, navigationKey, ...restProps }: SelectProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Select.d.ts.map

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;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,2CAqehB"}
+{"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;AAIzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAC7C,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;IAC/B,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,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,aAAqB,EACrB,GAAG,SAAS,EACb,EAAE,WAAW,CAAC,CAAC,CAAC,2CAkfhB"}

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

@@ -9,11 +9,11 @@ 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 useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
 const CheckBox_styled_1 = require("../CheckBox/CheckBox.styled");
 const commonStyles_1 = require("../commonStyles");
 const Select_styled_1 = require("./Select.styled");
-function Select({ control, defaultValue, name, required = false, label, multiple = false, disabled = false, options = [], rules, loading = false, helperText, error, placeholder = "", isShowSelectAll = true, isShowAvatar = false, onAction, renderOption, maxLimit, maxDisplayItems = 2, disableClearable = required ? true : false, setOnFinalChange = false, styling = "custom", ...restProps }) {
+function Select({ control, defaultValue, name, required = false, label, multiple = false, disabled = false, options = [], rules, loading = false, helperText, error, placeholder = "", isShowSelectAll = true, isShowAvatar = false, onAction, renderOption, maxLimit, maxDisplayItems = 2, disableClearable = required ? true : false, setOnFinalChange = false, styling = "custom", navigationKey = "tab", ...restProps }) {
     const { field: { onChange, value, ...restField }, } = (0, react_hook_form_1.useController)({
         name,
         control,
@@ -27,7 +27,7 @@ function Select({ control, defaultValue, name, required = false, label, multiple
     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 { setInputRef, maintainFocusAfterClose, handleKeyDown, handleEnterNavigation, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ isOpen: open, navigationKey });
     const handleSelectAll = (isSelected) => {
         if (isSelected) {
             const allValues = options
@@ -65,13 +65,13 @@ function Select({ control, defaultValue, name, required = false, label, multiple
                 return placeholder;
             };
             return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [isShowAvatar && selectedOption?.avatar && ((0, jsx_runtime_1.jsx)(material_1.Avatar, { src: selectedOption.avatar ?? "", sx: { width: 20, height: 20 } })), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: disabledColor, sx: {
-                            "-webkit-text-fill-color": disabledColor,
+                            WebkitTextFillColor: disabledColor,
                         }, noWrap: true, children: placeholderText() })] }));
         }
         if (!Array.isArray(selected) || selected.length === 0) {
             const shouldShowPlaceholder = styling !== "default" || !label || placeholder;
             return ((0, jsx_runtime_1.jsx)(material_1.Typography, { sx: {
-                    "-webkit-text-fill-color": disabledColor,
+                    WebkitTextFillColor: disabledColor,
                 }, color: disabledColor, variant: "body2", noWrap: true, children: shouldShowPlaceholder ? placeholder : "" }));
         }
         const visibleItems = selectedOptions.slice(0, maxDisplayItems);
@@ -89,7 +89,7 @@ function Select({ control, defaultValue, name, required = false, label, multiple
                         fontSize: "12px",
                         maxWidth: "120px",
                     }, children: option.label }, option.value))), overflowCount > 0 && ((0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", color: disabledColor, sx: {
-                        "-webkit-text-fill-color": disabledColor,
+                        WebkitTextFillColor: disabledColor,
                         backgroundColor: slate[300],
                         padding: "2px 5px",
                         borderRadius: "12px",
@@ -224,6 +224,12 @@ function Select({ control, defaultValue, name, required = false, label, multiple
                                             !disableClearable && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: (e) => {
                                                 e.stopPropagation();
                                                 onChange(multiple ? [] : "");
+                                            }, onKeyDown: (event) => {
+                                                if (navigationKey === "enter" &&
+                                                    event.key === "Enter") {
+                                                    event.stopPropagation();
+                                                    handleEnterNavigation(event);
+                                                }
                                             }, children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.ClearIcon, { sx: { fontSize: "14px" } }) })), (0, jsx_runtime_1.jsx)(x_date_pickers_1.ArrowDropDownIcon, { ...props })] })), displayEmpty: true, MenuProps: {
                                     PaperProps: {
                                         sx: {

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

@@ -1,7 +1,9 @@
 import { type SwitchProps } from "@mui/material";
 import { type ControllerRenderProps, type FieldValues, type UseControllerProps } from "react-hook-form";
+import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
 export type SwitchFieldProps<P extends FieldValues> = UseControllerProps<P> & Omit<Omit<SwitchProps, "checked">, keyof ControllerRenderProps<P>> & {
     loading?: boolean;
+    navigationKey?: NavigationKey;
 };
-export declare function SwitchField<P extends FieldValues>({ name, rules, control, defaultValue, loading, ...restSwitchProps }: SwitchFieldProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function SwitchField<P extends FieldValues>({ name, rules, control, defaultValue, loading, navigationKey, ...restSwitchProps }: SwitchFieldProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SwitchField.d.ts.map

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,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"}
+{"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;AACzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAG7C,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;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAEJ,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,EACjD,IAAI,EACJ,KAAK,EACL,OAAO,EACP,YAAY,EACZ,OAAe,EACf,aAAqB,EACrB,GAAG,eAAe,EACnB,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAgFrB"}

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

@@ -4,17 +4,23 @@ exports.SwitchField = SwitchField;
 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 useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
 const Skeleton_1 = require("./Skeleton");
-function SwitchField({ name, rules, control, defaultValue, loading = false, ...restSwitchProps }) {
+function SwitchField({ name, rules, control, defaultValue, loading = false, navigationKey = "tab", ...restSwitchProps }) {
     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)();
+    const { setInputRef, maintainFocus, handleKeyDown: handleNavigationKeyDown, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ navigationKey });
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {});
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.Switch, { checked: value, ...restField, ...restSwitchProps, inputRef: setInputRef, onChange: (event) => {
+    const handleKeyDown = (event) => {
+        handleNavigationKeyDown(event, undefined, false);
+        if (restSwitchProps.onKeyDown) {
+            restSwitchProps.onKeyDown(event);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.Switch, { checked: value, ...restField, ...restSwitchProps, inputRef: setInputRef, onKeyDown: handleKeyDown, onChange: (event) => {
             restField.onChange(event);
             maintainFocus();
         }, sx: {

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

@@ -1,6 +1,7 @@
 import { type TextFieldProps as MuiTextFieldProps, type StackProps } from "@mui/material";
 import type { ReactNode } from "react";
 import { type ControllerRenderProps, type FieldError, type FieldValues, type UseControllerProps } from "react-hook-form";
+import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
 export type AllowedCharacterType = "string" | "string-number" | "string-number-special" | "string-special" | "string-special-all" | "custom";
 export type LetterCase = "uppercase" | "lowercase" | "mixed";
 export type TextFieldProps<P extends FieldValues> = UseControllerProps<P> & Omit<MuiTextFieldProps, keyof ControllerRenderProps<P>> & {
@@ -23,6 +24,7 @@ export type TextFieldProps<P extends FieldValues> = UseControllerProps<P> & Omit
         regex: RegExp;
     };
     customOnChange?: (value: string | null | number) => void;
+    navigationKey?: NavigationKey;
 };
-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, multiline, ...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, navigationKey, 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;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,SAAS,EACT,GAAG,eAAe,EACnB,EAAE,cAAc,CAAC,CAAC,CAAC,2CAoKnB"}
+{"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;AAKzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAO7C,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;IACzD,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,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,aAAqB,EACrB,cAAc,EACd,GAAG,eAAe,EACnB,EAAE,cAAc,CAAC,CAAC,CAAC,2CAsKnB"}