npm - @codezee/sixtify-brahma - Versions diffs - 0.2.176 → 0.2.178 - Mend

@codezee/sixtify-brahma 0.2.176 → 0.2.178

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (111) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@codezee/sixtify-brahma",
-  "version": "0.2.176",
+  "version": "0.2.178",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/hardikranpariya/sixtify-brahma.git"
@@ -133,6 +133,7 @@
     "react-date-range": "^2.0.1",
     "react-i18next": "^14.1.2",
     "react-multi-carousel": "^2.8.5",
+    "react-number-format": "^5.4.4",
     "react-phone-input-2": "^2.15.1",
     "react-syntax-highlighter": "^16.1.0",
     "react-toastify": "^10.0.5",

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

@@ -1,5 +1,6 @@
 import type { AutocompleteValue, AutocompleteProps as MuiAutocompleteProps, StackProps } from "@mui/material";
 import { type ControllerRenderProps, type FieldValues, type UseControllerProps, type UseFormSetValue } from "react-hook-form";
+import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
 import type { OnAction } from "../../utils/types";
 export type Option = {
     heading?: string;
@@ -19,6 +20,9 @@ export type AutocompleteProps<P extends FieldValues> = UseControllerProps<P> & O
     placeholder?: string;
     isShowAvatar?: boolean;
     shouldCloseOnSelect?: boolean;
+    actionInsideAutocomplete?: boolean;
+    actionIcon?: React.ReactNode;
+    onActionClick?: () => void;
     onAction?: OnAction;
     isShowSelectAll?: boolean;
     isShowOptionsOnType?: boolean;
@@ -34,7 +38,8 @@ export type AutocompleteProps<P extends FieldValues> = UseControllerProps<P> & O
     setValue?: UseFormSetValue<P>;
     containerProps?: StackProps;
     styling?: "custom" | "default";
+    navigationKey?: NavigationKey;
     customOnChange?: (selected: any) => void;
 };
-export declare function Autocomplete<P extends FieldValues>({ control, defaultValue, name, required, label, multiple, disabled, options, rules, loading, helperText, error, withLabel, placeholder, freeSolo, isShowOptionsOnType, isShowSelectAll, isShowAvatar, isShowEmployeeData, shouldCloseOnSelect, onAction, renderOption, getOptionLabel, maxLimit, autoFocus, defaultOption, disableClearable, containerProps, setValue, limitTags, styling, customOnChange, ...restProps }: AutocompleteProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function Autocomplete<P extends FieldValues>({ control, defaultValue, name, required, label, multiple, disabled, options, rules, loading, helperText, error, withLabel, placeholder, freeSolo, isShowOptionsOnType, isShowSelectAll, isShowAvatar, isShowEmployeeData, shouldCloseOnSelect, actionInsideAutocomplete, actionIcon, onActionClick, onAction, renderOption, getOptionLabel, maxLimit, autoFocus, defaultOption, disableClearable, containerProps, setValue, limitTags, styling, navigationKey, customOnChange, ...restProps }: AutocompleteProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Autocomplete.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"~~AAAA~~,OAAO,KAAK,EAEV,iBAAiB,EACjB,iBAAiB,IAAI,oBAAoB,EACzC,UAAU,EACX,MAAM,eAAe,CAAC;~~AAwBvB~~,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAEhB,KAAK,kBAAkB,EACvB,KAAK,eAAe,EACrB,MAAM,iBAAiB,CAAC;~~AAOzB~~,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAUlD,MAAM,MAAM,MAAM,GAAG;IACnB,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,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAC1E,IAAI,CACF,IAAI,CACF,oBAAoB,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EACvD,aAAa,CACd,EACD,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAC/B,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,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,CACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EACrC,MAAM,EAAE,MAAM,EACd,KAAK,EAAE;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,KACzB,GAAG,CAAC,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,aAAa,CAAC,EAAE,iBAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IACrE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC9B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;~~IAG~~/B,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEJ,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,EAAE,EAClD,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,QAAgB,EAChB,OAAY,EACZ,KAAK,EACL,OAAe,EACf,UAAU,EACV,KAAK,EACL,SAAiB,EACjB,WAAgB,EAChB,QAAQ,EACR,mBAA2B,EAC3B,eAAsB,EACtB,YAAoB,EACpB,kBAA0B,EAC1B,mBAA2B,EAC3B,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,SAAiB,EACjB,aAAa,EACb,gBAA0C,EAC1C,cAAc,EACd,QAAQ,EACR,SAAa,EACb,OAAkB,EAClB,cAAc,EACd,GAAG,SAAS,EACb,EAAE,iBAAiB,CAAC,CAAC,CAAC,~~2CAinBtB~~"}
1	+ {"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 CHANGED Viewed

@@ -27,7 +27,7 @@ const commonStyles_1 = require("../commonStyles");
 const ChipV2_styled_1 = require("./ChipV2.styled");
 const Skeleton_1 = require("./Skeleton");
 const Tags_1 = require("./Tags");
-function Autocomplete({ control, defaultValue, name, required = false, label, multiple = false, disabled = false, options = [], rules, loading = false, helperText, error, withLabel = false, placeholder = "", freeSolo, isShowOptionsOnType = false, isShowSelectAll = true, isShowAvatar = false, isShowEmployeeData = false, shouldCloseOnSelect = false, onAction, renderOption, getOptionLabel, maxLimit, autoFocus = false, defaultOption, disableClearable = required ? true : false, containerProps, setValue, limitTags = 0, styling = "custom", customOnChange, ...restProps }) {
+function Autocomplete({ control, defaultValue, name, required = false, label, multiple = false, disabled = false, options = [], rules, loading = false, helperText, error, withLabel = false, placeholder = "", freeSolo, isShowOptionsOnType = false, isShowSelectAll = true, isShowAvatar = false, isShowEmployeeData = false, shouldCloseOnSelect = false, actionInsideAutocomplete = false, actionIcon, onActionClick, onAction, renderOption, getOptionLabel, maxLimit, autoFocus = false, defaultOption, disableClearable = required ? true : false, containerProps, setValue, limitTags = 0, styling = "custom", navigationKey = "tab", customOnChange, ...restProps }) {
     const { field: { onChange, value, ...restField }, } = (0, react_hook_form_1.useController)({
         name,
         control,
@@ -40,13 +40,16 @@ 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 { inputRef, setInputRef, maintainFocus, maintainFocusAfterClose, handleKeyDown, handleEnterNavigation, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ isOpen: internalOpen, navigationKey });
     const handleOpen = (0, react_1.useCallback)((event) => {
         if (!isControlledOpen) {
             setOpen(true);
         }
         externalOnOpen?.(event);
-    }, [isControlledOpen, externalOnOpen]);
+        if (inputRef.current) {
+            inputRef.current.blur();
+        }
+    }, [isControlledOpen, externalOnOpen, inputRef]);
     const handleClose = (0, react_1.useCallback)((event, reason) => {
         if (!isControlledOpen) {
             setOpen(false);
@@ -218,7 +221,35 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
                                 borderRadius: "50%",
                             },
                             width: "100%",
-                        }, open: internalOpen, onOpen: handleOpen, onClose: handleClose, disableCloseOnSelect: multiple || !shouldCloseOnSelect, disabled: disabled, freeSolo: freeSolo, ...restMuiProps, ...restField, disableClearable: disableClearable, renderTags: (value, getTagProps) => {
+                        }, open: internalOpen, onOpen: handleOpen, onClose: handleClose, disableCloseOnSelect: multiple || !shouldCloseOnSelect, disabled: disabled, freeSolo: freeSolo, ...restMuiProps, ...restField, disableClearable: disableClearable, slotProps: {
+                            clearIndicator: {
+                                tabIndex: disableClearable ||
+                                    (multiple
+                                        ? !Array.isArray(value) || value.length === 0
+                                        : !value || value === "")
+                                    ? -1
+                                    : 0,
+                                onKeyDown: (event) => {
+                                    if (navigationKey === "enter" && event.key === "Enter") {
+                                        handleEnterNavigation(event);
+                                    }
+                                },
+                                onMouseDown: (event) => {
+                                    event.stopPropagation();
+                                },
+                            },
+                            popupIndicator: {
+                                tabIndex: disabled ? -1 : 0,
+                                onKeyDown: (event) => {
+                                    if (navigationKey === "enter" && event.key === "Enter") {
+                                        handleEnterNavigation(event);
+                                    }
+                                },
+                                onMouseDown: (event) => {
+                                    event.stopPropagation();
+                                },
+                            },
+                        }, renderTags: (value, getTagProps) => {
                             const visibleTags = limitTags ? value.slice(0, limitTags) : value;
                             const hiddenCount = value.length - visibleTags.length;
                             const hiddenTags = limitTags ? value.slice(limitTags) : value;
@@ -242,7 +273,9 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
                                                             borderColor: color.butterflyBlue[900],
                                                         },
                                                     } })), !isSelectAll && isShowEmployeeData ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { sx: { width: 25, height: 25 }, src: avatar, alt: label }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: `${label} (${punch_code ?? "-"})` }), employee_code && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: color.iron[800], children: employee_code }))] })] })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { children: label }))] }), isSelectAll && (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { width: "280px" } })] }) }, key));
-                        }, renderInput: (params) => {
+                        },
+                        // eslint-disable-next-line sonarjs/cognitive-complexity
+                        renderInput: (params) => {
                             let startAdornment = params.InputProps.startAdornment;
                             if (!multiple && selectedValue?.avatar && getOptionLabel) {
                                 startAdornment = ((0, jsx_runtime_1.jsx)(material_1.Box, { width: "20px", marginLeft: "10px", children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: selectedValue.avatar, alt: selectedValue.label, sx: { width: 24, height: 24 } }) }));
@@ -253,10 +286,107 @@ 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), inputRef: setInputRef, InputProps: {
+                            let endAdornment = params.InputProps.endAdornment;
+                            if (actionInsideAutocomplete && (onActionClick || onAction)) {
+                                const handleActionClick = (event) => {
+                                    event.stopPropagation();
+                                    onActionClick?.();
+                                    onAction?.();
+                                };
+                                const handleMouseDown = (event) => {
+                                    event.stopPropagation();
+                                };
+                                const handleKeyDown = (event) => {
+                                    if (![
+                                        "Enter",
+                                        " ",
+                                        "ArrowRight",
+                                        "ArrowLeft",
+                                        "ArrowUp",
+                                        "ArrowDown",
+                                    ].includes(event.key)) {
+                                        return;
+                                    }
+                                    inputRef.current?.focus();
+                                    if (navigationKey === "enter") {
+                                        if (event.key === " ") {
+                                            event.stopPropagation();
+                                            event.preventDefault();
+                                            onActionClick?.();
+                                            onAction?.();
+                                        }
+                                        else if (event.key === "Enter") {
+                                            handleEnterNavigation(event);
+                                        }
+                                    }
+                                    else if (event.key === "Enter" || event.key === " ") {
+                                        event.stopPropagation();
+                                        event.preventDefault();
+                                        onActionClick?.();
+                                        onAction?.();
+                                    }
+                                };
+                                const actionIconElement = actionIcon ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { tabIndex: disabled ? -1 : 0, onClick: handleActionClick, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, sx: {
+                                        width: "28px",
+                                        height: "28px",
+                                        margin: "0px",
+                                        padding: "0px",
+                                    }, children: actionIcon })) : ((0, jsx_runtime_1.jsx)(Actions_1.AddIconAction, { disabled: disabled, onClick: handleActionClick, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, "aria-label": "Add", sx: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        height: "28px",
+                                        width: "28px",
+                                    } }));
+                                const actionAdornment = ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", sx: {
+                                        maxWidth: "25px",
+                                        maxHeight: "25px",
+                                        margin: "0px",
+                                        padding: "0px",
+                                    }, children: actionIconElement }));
+                                if (endAdornment) {
+                                    endAdornment = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [endAdornment, actionAdornment] }));
+                                }
+                                else {
+                                    endAdornment = actionAdornment;
+                                }
+                            }
+                            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),
+                                    "& .MuiAutocomplete-clearIndicator": {
+                                        visibility: "visible !important",
+                                    },
+                                    ...restProps.sx,
+                                }, InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling), inputRef: setInputRef, InputProps: {
                                     ...params.InputProps,
                                     startAdornment,
+                                    endAdornment,
+                                }, onBlur: (event) => {
+                                    const relatedTarget = event.relatedTarget;
+                                    if (relatedTarget &&
+                                        (relatedTarget.closest(".MuiAutocomplete-clearIndicator") ||
+                                            relatedTarget.closest(".MuiAutocomplete-popupIndicator") ||
+                                            (actionInsideAutocomplete &&
+                                                // eslint-disable-next-line quotes
+                                                (relatedTarget.closest('[role="button"]') ||
+                                                    relatedTarget.closest(".MuiIconButton-root"))))) {
+                                        event.preventDefault();
+                                    }
                                 }, onKeyDown: (event) => {
+                                    if (internalOpen && event.key === "Tab") {
+                                        const input = event.currentTarget.querySelector("input");
+                                        if (input) {
+                                            input.blur();
+                                        }
+                                    }
+                                    if (navigationKey === "enter" &&
+                                        event.key === "Enter" &&
+                                        !internalOpen) {
+                                        event.preventDefault();
+                                        event.stopPropagation();
+                                        handleEnterNavigation(event);
+                                        return;
+                                    }
                                     handleKeyDown(event, () => {
                                         if (!isControlledOpen) {
                                             setOpen(false);
@@ -285,7 +415,7 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
                             if (withLabel) {
                                 onChange(newValue);
                                 formatValueForCustomOnChange(newValue, false);
-                                if (shouldCloseOnSelect || !multiple) {
+                                if ((shouldCloseOnSelect || !multiple) && !internalOpen) {
                                     maintainFocus();
                                 }
                                 return;
@@ -314,7 +444,7 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
                                 }
                                 onChange(mergedValues);
                                 formatValueForCustomOnChange(newValue, true, mergedValues);
-                                if (shouldCloseOnSelect) {
+                                if (shouldCloseOnSelect && !internalOpen) {
                                     maintainFocus();
                                 }
                                 return;
@@ -322,7 +452,7 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
                             if (typeof newValue === "string") {
                                 onChange(newValue ?? null);
                                 formatValueForCustomOnChange(newValue, false);
-                                if (shouldCloseOnSelect || !multiple) {
+                                if ((shouldCloseOnSelect || !multiple) && !internalOpen) {
                                     maintainFocus();
                                 }
                                 return;
@@ -331,7 +461,7 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
                             onChange(finalValue);
                             formatValueForCustomOnChange(newValue, false);
                             setLastSelectedValue(finalValue);
-                            if (shouldCloseOnSelect || !multiple) {
+                            if ((shouldCloseOnSelect || !multiple) && !internalOpen) {
                                 maintainFocus();
                             }
                         }, groupBy: (option) => option.heading ?? "", renderGroup: (params) => {
@@ -343,5 +473,10 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
                             if (!multiple) {
                                 setInputValue("");
                             }
-                        }, autoHighlight: true }), onAction && (0, jsx_runtime_1.jsx)(Actions_1.EditIconAction, { disabled: disabled, onClick: onAction })] })] }));
+                        }, autoHighlight: true }), onAction &&
+                        !actionInsideAutocomplete &&
+                        (onActionClick ? ((0, jsx_runtime_1.jsx)(Actions_1.EditIconAction, { disabled: disabled, onClick: () => {
+                                onActionClick();
+                                onAction();
+                            } })) : ((0, jsx_runtime_1.jsx)(Actions_1.EditIconAction, { disabled: disabled, onClick: onAction })))] })] }));
 }

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

@@ -1,10 +1,12 @@
 import { type CheckboxProps as MuiCheckboxProps } from "@mui/material/Checkbox";
 import type { ChangeEvent } from "react";
 import { type ControllerRenderProps, type FieldValues, type UseControllerProps } from "react-hook-form";
+import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
 export type CheckBoxProps<P extends FieldValues> = UseControllerProps<P> & Omit<Omit<MuiCheckboxProps, "checked">, keyof ControllerRenderProps<P>> & {
     loading?: boolean;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     checked?: boolean;
+    navigationKey?: NavigationKey;
 };
-export declare function CheckBox<P extends FieldValues>({ name, rules, control, defaultValue, size, loading, ...restCheckBoxProps }: CheckBoxProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function CheckBox<P extends FieldValues>({ name, rules, control, defaultValue, size, loading, navigationKey, ...restCheckBoxProps }: CheckBoxProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CheckBox.d.ts.map

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

	@@ -1 +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;~~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~~"}
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,EAAiB,MAAM,OAAO,CAAC;AACxD,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAI7C,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;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAEJ,wBAAgB,QAAQ,CAAC,CAAC,SAAS,WAAW,EAAE,EAC9C,IAAI,EACJ,KAAK,EACL,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,OAAe,EACf,aAAqB,EACrB,GAAG,iBAAiB,EACrB,EAAE,aAAa,CAAC,CAAC,CAAC,2CAkDlB"}

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

@@ -7,17 +7,34 @@ 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 useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
 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, onChange, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
-    const { maintainFocus } = (0, hooks_1.useFormFieldFocus)();
+function CheckBox({ name, rules, control, defaultValue, size, loading = false, navigationKey = "tab", ...restCheckBoxProps }) {
+    const { field: { value = false, onChange, ref, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
+    const { inputRef, maintainFocus, handleKeyDown: handleNavigationKeyDown, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ navigationKey });
+    const handleKeyDown = (event) => {
+        handleNavigationKeyDown(event, undefined, false);
+        if (restCheckBoxProps.onKeyDown) {
+            restCheckBoxProps.onKeyDown(event);
+        }
+    };
+    const handleInputRef = (el) => {
+        inputRef.current = el;
+        if (ref) {
+            if (typeof ref === "function") {
+                ref(el);
+            }
+            else {
+                ref.current = el;
+            }
+        }
+    };
     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, onChange: (event) => {
+    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, inputRef: handleInputRef, onChange: (event) => {
             onChange(event.target.checked);
             maintainFocus();
-        }, ...restField, ...restCheckBoxProps }));
+        }, onKeyDown: handleKeyDown, ...restField, ...restCheckBoxProps }));
 }

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

@@ -3,6 +3,7 @@ import type { DatePickerProps as MuiDatePickerProps } from "@mui/x-date-pickers/
 import type { DateView, PickerValidDate } from "@mui/x-date-pickers/models";
 import React from "react";
 import type { FieldError, FieldValues, UseControllerProps } from "react-hook-form";
+import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
 export type DatePickerProps<P extends FieldValues> = UseControllerProps<P> & MuiDatePickerProps<PickerValidDate> & Partial<{
     label?: string;
     required: boolean;
@@ -21,6 +22,7 @@ export type DatePickerProps<P extends FieldValues> = UseControllerProps<P> & Mui
     }) => void;
     containerProps?: StackProps;
     styling?: "custom" | "default";
+    navigationKey?: NavigationKey;
 }>;
 export declare const dateFormats: {
     dateWithISO8601: string;
@@ -28,5 +30,5 @@ export declare const dateFormats: {
 };
 export declare const LeftArrowIcon: React.FC;
 export declare const RightArrowIcon: React.FC;
-export declare function DatePicker<P extends FieldValues>({ setError, control, defaultValue, disabled, label, readOnly, name, error, helperText, loading, required, clearable, rules, disableKeyboardInput, setOnFinalChange, views, format, containerProps, styling, ...restProps }: DatePickerProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function DatePicker<P extends FieldValues>({ setError, control, defaultValue, disabled, label, readOnly, name, error, helperText, loading, required, clearable, rules, disableKeyboardInput, setOnFinalChange, views, format, containerProps, styling, navigationKey, ...restProps }: DatePickerProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DatePicker.d.ts.map

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

	@@ -1 +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;~~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,~~2CAmNpB~~"}
1	+ {"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,KAAK,UAAU,EAAE,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;AAGzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAO7C,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;IAC/B,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,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,aAAqB,EACrB,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CAkOpB"}

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

@@ -15,7 +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 useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
 const commonStyles_1 = require("../commonStyles");
 const Skeleton_1 = require("./Skeleton");
 exports.dateFormats = {
@@ -42,11 +42,11 @@ const RightArrowIcon = () => {
         } }));
 };
 exports.RightArrowIcon = RightArrowIcon;
-function DatePicker({ setError, control, defaultValue, disabled = false, label, readOnly = false, name, error = false, helperText, loading = false, required = false, clearable = required ? false : true, rules, disableKeyboardInput = false, setOnFinalChange = false, views = ["year", "month", "day"], format = exports.dateFormats.dateWithEuropean, containerProps, styling = "custom", ...restProps }) {
+function DatePicker({ setError, control, defaultValue, disabled = false, label, readOnly = false, name, error = false, helperText, loading = false, required = false, clearable = required ? false : true, rules, disableKeyboardInput = false, setOnFinalChange = false, views = ["year", "month", "day"], format = exports.dateFormats.dateWithEuropean, containerProps, styling = "custom", navigationKey = "tab", ...restProps }) {
     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 { setInputRef, maintainFocus, maintainFocusAfterClose, handleKeyDown, handleEnterNavigation, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ isOpen: open, navigationKey });
     const theme = (0, material_1.useTheme)();
     const { iron, butterflyBlue, mirage } = theme.palette.app.color;
     const finalValue = (0, react_1.useMemo)(() => {
@@ -77,7 +77,12 @@ function DatePicker({ setError, control, defaultValue, disabled = false, label,
                         readOnly: disableKeyboardInput,
                     },
                     clearButton: {
-                        tabIndex: -1,
+                        tabIndex: clearable ? 0 : -1,
+                        onKeyDown: (event) => {
+                            if (navigationKey === "enter" && event.key === "Enter") {
+                                handleEnterNavigation(event);
+                            }
+                        },
                     },
                     textField: {
                         disabled,
@@ -89,7 +94,11 @@ function DatePicker({ setError, control, defaultValue, disabled = false, label,
                         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 })),
+                            endAdornment: ((0, jsx_runtime_1.jsx)(Actions_1.CalendarIconAction, { disabled: disabled, onClick: () => setOpen(true), showTooltip: false, onKeyDown: (event) => {
+                                    if (navigationKey === "enter" && event.key === "Enter") {
+                                        handleEnterNavigation(event);
+                                    }
+                                } })),
                             sx: {
                                 "& .MuiInputAdornment-root": {
                                     width: "30px",

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

@@ -2,6 +2,7 @@ import type { DateTimePickerProps as MuiDateTimePickerProps } from "@mui/x-date-
 import type { PickerValidDate } from "@mui/x-date-pickers/models";
 import { type ReactElement } from "react";
 import type { FieldError, FieldValues, UseControllerProps } from "react-hook-form";
+import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
 export type DateTimePickerProps<P extends FieldValues> = UseControllerProps<P> & MuiDateTimePickerProps<PickerValidDate> & Partial<{
     label: string;
     required: boolean;
@@ -19,6 +20,7 @@ export type DateTimePickerProps<P extends FieldValues> = UseControllerProps<P> &
         message?: string;
     }) => void;
     styling?: "custom" | "default";
+    navigationKey?: NavigationKey;
 }>;
-export declare function DateTimePicker<P extends FieldValues>({ control, defaultValue, disabled, label, readOnly, name, error, helperText, loading, required, clearable, rules, format, helperIcon, toolTipText, timeStepsMinutes, styling, ...restProps }: DateTimePickerProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function DateTimePicker<P extends FieldValues>({ control, defaultValue, disabled, label, readOnly, name, error, helperText, loading, required, clearable, rules, format, helperIcon, toolTipText, timeStepsMinutes, styling, navigationKey, ...restProps }: DateTimePickerProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DateTimePicker.d.ts.map

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

	@@ -1 +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,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,~~2CAyNxB~~"}
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,EAAY,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAO7C,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;IAC/B,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,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,aAAqB,EACrB,GAAG,SAAS,EACb,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CAwOxB"}

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

@@ -13,7 +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 useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
 const commonStyles_1 = require("../commonStyles");
 const Skeleton_1 = require("./Skeleton");
 const hoverTextStyle = (color) => ({
@@ -39,10 +39,10 @@ const RightArrowIcon = () => {
             p: "4px",
         } }));
 };
-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 }) {
+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", navigationKey = "tab", ...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);
+    const { setInputRef, maintainFocus, maintainFocusAfterClose, handleKeyDown, handleEnterNavigation, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ isOpen: open, navigationKey });
     if (error && value && typeof value === "object") {
         helperText = "Invalid time";
     }
@@ -69,7 +69,12 @@ function DateTimePicker({ control, defaultValue, disabled = false, label, readOn
                         },
                     },
                     clearButton: {
-                        tabIndex: -1,
+                        tabIndex: clearable ? 0 : -1,
+                        onKeyDown: (event) => {
+                            if (navigationKey === "enter" && event.key === "Enter") {
+                                handleEnterNavigation(event);
+                            }
+                        },
                     },
                     textField: {
                         disabled,
@@ -79,7 +84,11 @@ function DateTimePicker({ control, defaultValue, disabled = false, label, readOn
                         required: styling === "default" ? required : undefined,
                         inputRef: setInputRef,
                         InputProps: {
-                            endAdornment: ((0, jsx_runtime_1.jsx)(Actions_1.CalendarIconAction, { showTooltip: false, disabled: disabled, onClick: () => setOpen(true) })),
+                            endAdornment: ((0, jsx_runtime_1.jsx)(Actions_1.CalendarIconAction, { showTooltip: false, disabled: disabled, onClick: () => setOpen(true), onKeyDown: (event) => {
+                                    if (navigationKey === "enter" && event.key === "Enter") {
+                                        handleEnterNavigation(event);
+                                    }
+                                } })),
                             sx: {
                                 "& .MuiInputAdornment-root": {
                                     width: "30px",

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

@@ -0,0 +1,18 @@
+import { type TextFieldProps as MuiTextFieldProps, type StackProps } from "@mui/material";
+import type { FieldValues, UseControllerProps } from "react-hook-form";
+import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
+export type DecimalTextFieldProps<P extends FieldValues> = UseControllerProps<P> & Omit<MuiTextFieldProps, keyof UseControllerProps<P> | "type" | "value" | "onChange"> & {
+    label?: string;
+    loading?: boolean;
+    containerProps?: StackProps;
+    styling?: "custom" | "default";
+    infoMessage?: React.ReactNode;
+    decimalScale: number;
+    defaultFallbackValue?: number;
+    min?: number;
+    max?: number;
+    customOnChange?: (value: number) => void;
+    navigationKey?: NavigationKey;
+};
+export declare function DecimalTextField<P extends FieldValues>({ control, name, decimalScale, defaultFallbackValue, min, max, defaultValue, label, required, disabled, loading, placeholder, containerProps, styling, infoMessage, customOnChange, navigationKey, ...restProps }: DecimalTextFieldProps<P>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DecimalTextField.d.ts.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"DecimalTextField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DecimalTextField/DecimalTextField.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,cAAc,IAAI,iBAAiB,EACxC,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAIvE,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAO7C,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,WAAW,IACrD,kBAAkB,CAAC,CAAC,CAAC,GACnB,IAAI,CACF,iBAAiB,EACjB,MAAM,kBAAkB,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAC5D,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAEN,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,WAAW,EAAE,EACtD,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,oBAAwB,EACxB,GAAG,EACH,GAAG,EACH,YAAY,EACZ,KAAU,EACV,QAAQ,EACR,QAAQ,EACR,OAAe,EACf,WAAgB,EAChB,cAAc,EACd,OAAkB,EAClB,WAAW,EACX,cAAc,EACd,aAAqB,EACrB,GAAG,SAAS,EACb,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAsW1B"}