@codezee/sixtify-brahma 0.2.154 → 0.2.156

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 (34) hide show
  1. package/package.json +1 -1
  2. package/packages/shared-components/dist/Button/SplitButton.d.ts +9 -1
  3. package/packages/shared-components/dist/Button/SplitButton.d.ts.map +1 -1
  4. package/packages/shared-components/dist/Button/SplitButton.js +56 -6
  5. package/packages/shared-components/dist/FormFields/Autocomplete/Autocomplete.d.ts.map +1 -1
  6. package/packages/shared-components/dist/FormFields/Autocomplete/Autocomplete.js +30 -20
  7. package/packages/shared-components/dist/FormFields/CheckBox/CheckBox.d.ts.map +1 -1
  8. package/packages/shared-components/dist/FormFields/CheckBox/CheckBox.js +7 -2
  9. package/packages/shared-components/dist/FormFields/DatePicker/DatePicker.d.ts.map +1 -1
  10. package/packages/shared-components/dist/FormFields/DatePicker/DatePicker.js +11 -1
  11. package/packages/shared-components/dist/FormFields/DateTimePicker/DateTimePicker.d.ts.map +1 -1
  12. package/packages/shared-components/dist/FormFields/DateTimePicker/DateTimePicker.js +25 -3
  13. package/packages/shared-components/dist/FormFields/PhoneInputField/PhoneInputField.d.ts.map +1 -1
  14. package/packages/shared-components/dist/FormFields/PhoneInputField/PhoneInputField.js +103 -23
  15. package/packages/shared-components/dist/FormFields/Rating/Ratting.d.ts.map +1 -1
  16. package/packages/shared-components/dist/FormFields/Rating/Ratting.js +3 -0
  17. package/packages/shared-components/dist/FormFields/Select/Select.d.ts.map +1 -1
  18. package/packages/shared-components/dist/FormFields/Select/Select.js +11 -0
  19. package/packages/shared-components/dist/FormFields/SwitchField/SwitchField.d.ts.map +1 -1
  20. package/packages/shared-components/dist/FormFields/SwitchField/SwitchField.js +7 -3
  21. package/packages/shared-components/dist/FormFields/TextField/TextField.d.ts +2 -1
  22. package/packages/shared-components/dist/FormFields/TextField/TextField.d.ts.map +1 -1
  23. package/packages/shared-components/dist/FormFields/TextField/TextField.js +15 -8
  24. package/packages/shared-components/dist/FormFields/TimeField/TimeField.d.ts.map +1 -1
  25. package/packages/shared-components/dist/FormFields/TimeField/TimeField.js +11 -2
  26. package/packages/shared-components/dist/FormFields/TimePicker/TimePicker.d.ts.map +1 -1
  27. package/packages/shared-components/dist/FormFields/TimePicker/TimePicker.js +18 -3
  28. package/packages/shared-components/dist/SmartGrid/exportUtils/helper.js +1 -1
  29. package/packages/shared-components/dist/utils/hooks/index.d.ts +2 -1
  30. package/packages/shared-components/dist/utils/hooks/index.d.ts.map +1 -1
  31. package/packages/shared-components/dist/utils/hooks/index.js +2 -1
  32. package/packages/shared-components/dist/utils/hooks/useFormFieldFocus.d.ts +8 -0
  33. package/packages/shared-components/dist/utils/hooks/useFormFieldFocus.d.ts.map +1 -0
  34. package/packages/shared-components/dist/utils/hooks/useFormFieldFocus.js +48 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@codezee/sixtify-brahma",
3
- "version": "0.2.154",
3
+ "version": "0.2.156",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/hardikranpariya/sixtify-brahma.git"
package/packages/shared-components/dist/Button/SplitButton.d.ts CHANGED
@@ -6,6 +6,8 @@ export type SplitButtonMenuItem = {
6
6
  label: string;
7
7
  onClick: OnAction;
8
8
  divider?: boolean;
9
+ disabled?: boolean;
10
+ hidden?: boolean;
9
11
  };
10
12
  export type SplitButtonProps = {
11
13
  icon?: ReactNode;
@@ -13,9 +15,15 @@ export type SplitButtonProps = {
13
15
  size?: "small" | "medium" | "large";
14
16
  onClick?: OnAction;
15
17
  menuItems?: SplitButtonMenuItem[];
18
+ disabled?: boolean;
19
+ mainDisabled?: boolean;
20
+ arrowDisabled?: boolean;
21
+ hidden?: boolean;
22
+ mainHidden?: boolean;
23
+ loading?: boolean;
16
24
  sx?: SxProps;
17
25
  containerSx?: SxProps;
18
26
  variant?: "contained" | "text";
19
27
  };
20
- export declare const SplitButton: ({ icon, label, size, onClick, menuItems, sx, containerSx, variant, }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;
28
+ export declare const SplitButton: ({ icon, label, size, onClick, menuItems, sx, containerSx, variant, disabled, mainDisabled, arrowDisabled, hidden, mainHidden, loading, }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element | null;
21
29
  //# sourceMappingURL=SplitButton.d.ts.map
package/packages/shared-components/dist/Button/SplitButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SplitButton.d.ts","sourceRoot":"","sources":["../../src/Button/SplitButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAUL,KAAK,OAAO,EACb,MAAM,eAAe,CAAC;AAEvB,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,mBAAmB,GAAG;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,QAAQ,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,SAAS,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,sEASzB,gBAAgB,4CAyGlB,CAAC"}
1
+ {"version":3,"file":"SplitButton.d.ts","sourceRoot":"","sources":["../../src/Button/SplitButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAWL,KAAK,OAAO,EACb,MAAM,eAAe,CAAC;AAEvB,OAAO,EAA8B,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAC5E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,mBAAmB,GAAG;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,QAAQ,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,SAAS,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAElC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,0IAgBzB,gBAAgB,mDA8KlB,CAAC"}
package/packages/shared-components/dist/Button/SplitButton.js CHANGED
@@ -9,10 +9,53 @@ const ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDo
9
9
  const material_1 = require("@mui/material");
10
10
  const isFunction_1 = __importDefault(require("lodash/isFunction"));
11
11
  const react_1 = require("react");
12
- const SplitButton = ({ icon, label, size = "medium", onClick, menuItems = [], sx, containerSx, variant = "contained", }) => {
12
+ const SplitButton = ({ icon, label, size = "medium", onClick, menuItems = [], sx, containerSx, variant = "contained", disabled = false, mainDisabled = false, arrowDisabled = false, hidden = false, mainHidden = false, loading = false, }) => {
13
13
  const [open, setOpen] = (0, react_1.useState)(false);
14
14
  const anchorRef = (0, react_1.useRef)(null);
15
- const handleToggle = () => setOpen((prev) => !prev);
15
+ const visibleMenuItems = (0, react_1.useMemo)(() => menuItems.filter((m) => !m.hidden), [menuItems]);
16
+ const { effectiveMain, filteredMenuItems } = (0, react_1.useMemo)(() => {
17
+ if (!mainHidden) {
18
+ return {
19
+ effectiveMain: {
20
+ label,
21
+ icon,
22
+ onClick,
23
+ disabled: mainDisabled || disabled,
24
+ },
25
+ filteredMenuItems: visibleMenuItems,
26
+ };
27
+ }
28
+ if (visibleMenuItems.length === 0) {
29
+ return { effectiveMain: null, filteredMenuItems: [] };
30
+ }
31
+ const [first, ...rest] = visibleMenuItems;
32
+ return {
33
+ effectiveMain: {
34
+ label: first?.label ?? "",
35
+ icon: null,
36
+ onClick: first?.onClick,
37
+ disabled: first?.disabled || disabled,
38
+ },
39
+ filteredMenuItems: rest,
40
+ };
41
+ }, [
42
+ mainHidden,
43
+ label,
44
+ icon,
45
+ onClick,
46
+ mainDisabled,
47
+ disabled,
48
+ visibleMenuItems,
49
+ ]);
50
+ if (hidden || !effectiveMain) {
51
+ return null;
52
+ }
53
+ const handleToggle = () => {
54
+ if (disabled || arrowDisabled) {
55
+ return;
56
+ }
57
+ setOpen((prev) => !prev);
58
+ };
16
59
  const handleClose = (event) => {
17
60
  if (anchorRef.current?.contains(event.target)) {
18
61
  return;
@@ -20,11 +63,17 @@ const SplitButton = ({ icon, label, size = "medium", onClick, menuItems = [], sx
20
63
  setOpen(false);
21
64
  };
22
65
  const handleMainClick = () => {
23
- if ((0, isFunction_1.default)(onClick)) {
24
- onClick();
66
+ if (disabled || effectiveMain.disabled || loading) {
67
+ return;
68
+ }
69
+ if ((0, isFunction_1.default)(effectiveMain.onClick)) {
70
+ effectiveMain.onClick();
25
71
  }
26
72
  };
27
73
  const handleMenuItemClick = (item) => {
74
+ if (item.disabled) {
75
+ return;
76
+ }
28
77
  if ((0, isFunction_1.default)(item.onClick)) {
29
78
  item.onClick();
30
79
  }
@@ -34,10 +83,11 @@ const SplitButton = ({ icon, label, size = "medium", onClick, menuItems = [], sx
34
83
  boxShadow: "none",
35
84
  border: "none !important",
36
85
  position: "relative",
86
+ minWidth: "60px",
37
87
  ...containerSx,
38
- }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: variant, size: size, startIcon: icon, onClick: handleMainClick, sx: sx, children: label }), (0, jsx_runtime_1.jsx)(material_1.Button, { size: size, variant: variant, "aria-controls": open ? "split-button-menu" : undefined, "aria-expanded": open ? "true" : undefined, onClick: handleToggle, sx: { width: "32px", minWidth: "32px", ...sx }, children: (0, jsx_runtime_1.jsx)(ArrowDropDown_1.default, {}) })] }), (0, jsx_runtime_1.jsx)(material_1.Popper, { open: open, anchorEl: anchorRef.current, role: undefined, transition: true, disablePortal: true, placement: "bottom-end", sx: { zIndex: 1300 }, children: ({ TransitionProps, placement }) => ((0, jsx_runtime_1.jsx)(material_1.Grow, { ...TransitionProps, style: {
88
+ }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: variant, size: size, startIcon: !loading ? effectiveMain.icon : null, disabled: disabled || effectiveMain.disabled, onClick: handleMainClick, sx: sx, children: loading ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 18 }) : effectiveMain.label }), filteredMenuItems.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Button, { size: size, variant: variant, disabled: disabled || arrowDisabled || loading, "aria-controls": open ? "split-button-menu" : undefined, "aria-expanded": open ? "true" : undefined, onClick: handleToggle, sx: { width: "32px", minWidth: "32px", ...sx }, children: (0, jsx_runtime_1.jsx)(ArrowDropDown_1.default, {}) }))] }), (0, jsx_runtime_1.jsx)(material_1.Popper, { open: open, anchorEl: anchorRef.current, role: undefined, transition: true, disablePortal: true, placement: "bottom-end", sx: { zIndex: 1300 }, children: ({ TransitionProps, placement }) => ((0, jsx_runtime_1.jsx)(material_1.Grow, { ...TransitionProps, style: {
39
89
  transformOrigin: placement === "bottom" ? "center top" : "center bottom",
40
- }, children: (0, jsx_runtime_1.jsx)(material_1.Paper, { elevation: 3, children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: handleClose, children: (0, jsx_runtime_1.jsx)(material_1.MenuList, { children: menuItems.map((item) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: () => handleMenuItemClick(item), children: item.label }), item.divider && ((0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
90
+ }, children: (0, jsx_runtime_1.jsx)(material_1.Paper, { elevation: 3, children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: handleClose, children: (0, jsx_runtime_1.jsx)(material_1.MenuList, { children: filteredMenuItems.map((item) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { disabled: item.disabled, onClick: () => handleMenuItemClick(item), children: item.label }), item.divider && ((0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
41
91
  border: "none",
42
92
  borderTop: "1px solid #eee",
43
93
  margin: 0,
package/packages/shared-components/dist/FormFields/Autocomplete/Autocomplete.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"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"}
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
@@ -21,6 +21,7 @@ const Actions_1 = require("../../Actions");
21
21
  const Toast_1 = require("../../Toast");
22
22
  const Tooltip_1 = require("../../Tooltip");
23
23
  const useAutocompleteScrollToSelected_1 = require("../../utils/hooks/useAutocompleteScrollToSelected");
24
+ const useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
24
25
  const CheckBox_styled_1 = require("../CheckBox/CheckBox.styled");
25
26
  const commonStyles_1 = require("../commonStyles");
26
27
  const ChipV2_styled_1 = require("./ChipV2.styled");
@@ -39,6 +40,7 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
39
40
  const { open: controlledOpen, onOpen: externalOnOpen, onClose: externalOnClose, ...restMuiProps } = restProps;
40
41
  const isControlledOpen = controlledOpen !== undefined;
41
42
  const internalOpen = isControlledOpen ? controlledOpen : open;
43
+ const { setInputRef, maintainFocus, maintainFocusAfterClose, handleKeyDown } = (0, useFormFieldFocus_1.useFormFieldFocus)(internalOpen);
42
44
  const handleOpen = (0, react_1.useCallback)((event) => {
43
45
  if (!isControlledOpen) {
44
46
  setOpen(true);
@@ -50,7 +52,10 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
50
52
  setOpen(false);
51
53
  }
52
54
  externalOnClose?.(event, reason);
53
- }, [isControlledOpen, externalOnClose]);
55
+ if (reason !== "toggleInput") {
56
+ maintainFocusAfterClose();
57
+ }
58
+ }, [isControlledOpen, externalOnClose, maintainFocusAfterClose]);
54
59
  const convertValueToOption = (val) => {
55
60
  const foundOption = (0, find_1.default)(options, (option) => option.value === val);
56
61
  return foundOption || { label: String(val), value: val };
@@ -151,10 +156,11 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
151
156
  }
152
157
  return options.find((option) => option.value === value) || null;
153
158
  }, [multiple, options, value, defaultOption]);
154
- const { palette: { app: { color }, }, } = (0, material_1.useTheme)();
159
+ const theme = (0, material_1.useTheme)();
160
+ const { palette: { app: { color }, }, } = theme;
155
161
  const StyledPaper = (0, styles_1.styled)(material_1.Paper)(({ theme }) => ({
156
162
  "& .MuiAutocomplete-listbox": {
157
- maxHeight: 150,
163
+ maxHeight: 200,
158
164
  overflowY: "auto",
159
165
  marginTop: "0px",
160
166
  "&::-webkit-scrollbar": {
@@ -212,22 +218,7 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
212
218
  borderRadius: "50%",
213
219
  },
214
220
  width: "100%",
215
- }, open: internalOpen, onOpen: handleOpen, onClose: handleClose, disableCloseOnSelect: multiple || !shouldCloseOnSelect, disabled: disabled, freeSolo: freeSolo, ...restMuiProps, ...restField, disableClearable: disableClearable, componentsProps: {
216
- popper: {
217
- modifiers: [
218
- {
219
- name: "preventOverflow",
220
- enabled: true,
221
- options: {
222
- altAxis: true,
223
- altBoundary: true,
224
- tether: true,
225
- rootBoundary: "document",
226
- },
227
- },
228
- ],
229
- },
230
- }, renderTags: (value, getTagProps) => {
221
+ }, open: internalOpen, onOpen: handleOpen, onClose: handleClose, disableCloseOnSelect: multiple || !shouldCloseOnSelect, disabled: disabled, freeSolo: freeSolo, ...restMuiProps, ...restField, disableClearable: disableClearable, renderTags: (value, getTagProps) => {
231
222
  const visibleTags = limitTags ? value.slice(0, limitTags) : value;
232
223
  const hiddenCount = value.length - visibleTags.length;
233
224
  const hiddenTags = limitTags ? value.slice(limitTags) : value;
@@ -260,9 +251,16 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
260
251
  }
261
252
  return placeholder || `Select ${label}`;
262
253
  };
263
- return ((0, jsx_runtime_1.jsx)(material_1.TextField, { ...params, placeholder: multiple && selectedValue?.length ? "" : getPlaceholder(), label: styling === "default" ? label : undefined, required: styling === "default" ? required : undefined, error: error, autoFocus: !multiple ? autoFocus : false, helperText: helperText, sx: (0, commonStyles_1.getDefaultTextFieldSx)(styling), InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling), InputProps: {
254
+ 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: {
264
255
  ...params.InputProps,
265
256
  startAdornment,
257
+ }, onKeyDown: (event) => {
258
+ handleKeyDown(event, () => {
259
+ if (!isControlledOpen) {
260
+ setOpen(false);
261
+ }
262
+ externalOnClose?.(event, "escape");
263
+ }, internalOpen);
266
264
  }, onChange: (e) => {
267
265
  if (isShowOptionsOnType) {
268
266
  setInputValue(e.target.value);
@@ -285,6 +283,9 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
285
283
  if (withLabel) {
286
284
  onChange(newValue);
287
285
  formatValueForCustomOnChange(newValue, false);
286
+ if (shouldCloseOnSelect || !multiple) {
287
+ maintainFocus();
288
+ }
288
289
  return;
289
290
  }
290
291
  if (multiple && Array.isArray(newValue)) {
@@ -311,17 +312,26 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
311
312
  }
312
313
  onChange(mergedValues);
313
314
  formatValueForCustomOnChange(newValue, true, mergedValues);
315
+ if (shouldCloseOnSelect) {
316
+ maintainFocus();
317
+ }
314
318
  return;
315
319
  }
316
320
  if (typeof newValue === "string") {
317
321
  onChange(newValue ?? null);
318
322
  formatValueForCustomOnChange(newValue, false);
323
+ if (shouldCloseOnSelect || !multiple) {
324
+ maintainFocus();
325
+ }
319
326
  return;
320
327
  }
321
328
  const finalValue = newValue && !Array.isArray(newValue) ? newValue.value : null;
322
329
  onChange(finalValue);
323
330
  formatValueForCustomOnChange(newValue, false);
324
331
  setLastSelectedValue(finalValue);
332
+ if (shouldCloseOnSelect || !multiple) {
333
+ maintainFocus();
334
+ }
325
335
  }, groupBy: (option) => option.heading ?? "", renderGroup: (params) => {
326
336
  if (!params.group) {
327
337
  return (0, jsx_runtime_1.jsx)(material_1.Box, { children: params.children });
package/packages/shared-components/dist/FormFields/CheckBox/CheckBox.d.ts.map CHANGED
@@ -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;AAIzB,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACtE,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,wBAAgB,QAAQ,CAAC,CAAC,SAAS,WAAW,EAAE,EAC9C,IAAI,EACJ,KAAK,EACL,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,OAAe,EACf,GAAG,iBAAiB,EACrB,EAAE,aAAa,CAAC,CAAC,CAAC,2CAkBlB"}
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"}
package/packages/shared-components/dist/FormFields/CheckBox/CheckBox.js CHANGED
@@ -7,12 +7,17 @@ exports.CheckBox = CheckBox;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
9
9
  const react_hook_form_1 = require("react-hook-form");
10
+ const hooks_1 = require("../../utils/hooks");
10
11
  const CheckBox_styled_1 = require("./CheckBox.styled");
11
12
  const Skeleton_1 = require("./Skeleton");
12
13
  function CheckBox({ name, rules, control, defaultValue, size, loading = false, ...restCheckBoxProps }) {
13
- const { field: { value = false, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
14
+ const { field: { value = false, onChange, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
15
+ const { maintainFocus } = (0, hooks_1.useFormFieldFocus)();
14
16
  if (loading) {
15
17
  return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {});
16
18
  }
17
- return ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: (0, jsx_runtime_1.jsx)(CheckBox_styled_1.BoxStyled, { size: size }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_styled_1.CheckStyled, { size: size }), checked: value, ...restField, ...restCheckBoxProps }));
19
+ 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) => {
20
+ onChange(event.target.checked);
21
+ maintainFocus();
22
+ }, ...restField, ...restCheckBoxProps }));
18
23
  }
package/packages/shared-components/dist/FormFields/DatePicker/DatePicker.d.ts.map CHANGED
@@ -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;AASzB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACxE,kBAAkB,CAAC,eAAe,CAAC,GACnC,OAAO,CAAC;IACN,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC,CAAC,CAAC;AAEL,eAAO,MAAM,WAAW;;;CAGvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAcjC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAclC,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,SAAmC,EACnC,KAAK,EACL,oBAA4B,EAC5B,gBAAwB,EACxB,KAAgC,EAChC,MAAqC,EACrC,cAAc,EACd,OAAkB,EAClB,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CA2MpB"}
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,2CAuNpB"}
package/packages/shared-components/dist/FormFields/DatePicker/DatePicker.js CHANGED
@@ -15,6 +15,7 @@ const luxon_1 = require("luxon");
15
15
  const react_1 = require("react");
16
16
  const react_hook_form_1 = require("react-hook-form");
17
17
  const Actions_1 = require("../../Actions");
18
+ const hooks_1 = require("../../utils/hooks");
18
19
  const commonStyles_1 = require("../commonStyles");
19
20
  const Skeleton_1 = require("./Skeleton");
20
21
  exports.dateFormats = {
@@ -45,6 +46,7 @@ function DatePicker({ setError, control, defaultValue, disabled = false, label,
45
46
  const [localError, setLocalError] = (0, react_1.useState)();
46
47
  const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
47
48
  const [open, setOpen] = (0, react_1.useState)(false);
49
+ const { setInputRef, maintainFocus, maintainFocusAfterClose, handleKeyDown } = (0, hooks_1.useFormFieldFocus)(open);
48
50
  const theme = (0, material_1.useTheme)();
49
51
  const { iron, butterflyBlue, mirage } = theme.palette.app.color;
50
52
  const finalValue = (0, react_1.useMemo)(() => {
@@ -65,7 +67,10 @@ function DatePicker({ setError, control, defaultValue, disabled = false, label,
65
67
  if (loading) {
66
68
  return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, styling: styling });
67
69
  }
68
- return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", ...containerProps, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { ...restField, ...restProps, disabled: disabled, views: views, format: format, value: finalValue, readOnly: readOnly, open: open && !readOnly, onOpen: () => setOpen(true), onClose: () => setOpen(false), slotProps: {
70
+ return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", ...containerProps, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { ...restField, ...restProps, disabled: disabled, views: views, format: format, value: finalValue, readOnly: readOnly, open: open && !readOnly, onOpen: () => setOpen(true), onClose: () => {
71
+ setOpen(false);
72
+ maintainFocusAfterClose();
73
+ }, slotProps: {
69
74
  field: {
70
75
  clearable,
71
76
  onClear: () => onChange(null),
@@ -82,6 +87,7 @@ function DatePicker({ setError, control, defaultValue, disabled = false, label,
82
87
  required: styling === "default" ? required : undefined,
83
88
  sx: (0, commonStyles_1.getDefaultTextFieldSx)(styling),
84
89
  InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling),
90
+ inputRef: setInputRef,
85
91
  InputProps: {
86
92
  endAdornment: ((0, jsx_runtime_1.jsx)(Actions_1.CalendarIconAction, { disabled: disabled, onClick: () => setOpen(true), showTooltip: false })),
87
93
  sx: {
@@ -91,6 +97,7 @@ function DatePicker({ setError, control, defaultValue, disabled = false, label,
91
97
  },
92
98
  },
93
99
  onKeyDown: (event) => {
100
+ handleKeyDown(event, () => setOpen(false), open);
94
101
  if (event.key === "Backspace" && clearable) {
95
102
  onChange(null);
96
103
  setLocalError(undefined);
@@ -160,6 +167,7 @@ function DatePicker({ setError, control, defaultValue, disabled = false, label,
160
167
  if (setOnFinalChange && value?.isValid) {
161
168
  onChange(value.toISODate());
162
169
  setLocalError(undefined);
170
+ maintainFocus();
163
171
  }
164
172
  restProps?.onAccept?.(value, details);
165
173
  }, onChange: (value, details) => {
@@ -169,6 +177,7 @@ function DatePicker({ setError, control, defaultValue, disabled = false, label,
169
177
  if (!value) {
170
178
  onChange(null);
171
179
  setLocalError(undefined);
180
+ maintainFocus();
172
181
  return;
173
182
  }
174
183
  const isValid = value?.isValid === true;
@@ -185,6 +194,7 @@ function DatePicker({ setError, control, defaultValue, disabled = false, label,
185
194
  message: errorMessage,
186
195
  });
187
196
  }
197
+ maintainFocus();
188
198
  });
189
199
  restProps?.onChange?.(value, details);
190
200
  } })] }));
package/packages/shared-components/dist/FormFields/DateTimePicker/DateTimePicker.d.ts.map CHANGED
@@ -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,EAAE,KAAK,YAAY,EAAY,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AASzB,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAC5E,sBAAsB,CAAC,eAAe,CAAC,GACvC,OAAO,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;IACV,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC,CAAC,CAAC;AAwCL,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,EACpD,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,SAAmC,EACnC,KAAK,EACL,MAA2B,EAC3B,UAAU,EACV,WAAW,EACX,gBAAoB,EACpB,OAAkB,EAClB,GAAG,SAAS,EACb,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CA+LxB"}
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,2CA6NxB"}
package/packages/shared-components/dist/FormFields/DateTimePicker/DateTimePicker.js CHANGED
@@ -13,6 +13,7 @@ const luxon_1 = require("luxon");
13
13
  const react_1 = require("react");
14
14
  const react_hook_form_1 = require("react-hook-form");
15
15
  const Actions_1 = require("../../Actions");
16
+ const hooks_1 = require("../../utils/hooks");
16
17
  const commonStyles_1 = require("../commonStyles");
17
18
  const Skeleton_1 = require("./Skeleton");
18
19
  const hoverTextStyle = (color) => ({
@@ -41,6 +42,7 @@ const RightArrowIcon = () => {
41
42
  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 }) {
42
43
  const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
43
44
  const [open, setOpen] = (0, react_1.useState)(false);
45
+ const { setInputRef, maintainFocus, maintainFocusAfterClose, handleKeyDown } = (0, hooks_1.useFormFieldFocus)(open);
44
46
  if (error && value && typeof value === "object") {
45
47
  helperText = "Invalid time";
46
48
  }
@@ -53,10 +55,18 @@ function DateTimePicker({ control, defaultValue, disabled = false, label, readOn
53
55
  return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "350px" }, children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, styling: styling }) }));
54
56
  }
55
57
  const EmptyIcon = () => null;
56
- return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "center", flexDirection: "row", gap: "5px", children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), helperIcon && toolTipText && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: toolTipText, placement: "bottom", children: helperIcon }))] })), (0, jsx_runtime_1.jsx)(DateTimePicker_1.DateTimePicker, { ...restField, ...restProps, disabled: disabled, readOnly: readOnly, open: open, ampm: false, value: pickerValue, timeSteps: { minutes: timeStepsMinutes }, format: format, onOpen: () => setOpen(true), onClose: () => setOpen(false), slotProps: {
58
+ return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "center", flexDirection: "row", gap: "5px", children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), helperIcon && toolTipText && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: toolTipText, placement: "bottom", children: helperIcon }))] })), (0, jsx_runtime_1.jsx)(DateTimePicker_1.DateTimePicker, { ...restField, ...restProps, disabled: disabled, readOnly: readOnly, open: open, ampm: false, value: pickerValue, timeSteps: { minutes: timeStepsMinutes }, format: format, onOpen: () => {
59
+ setOpen(true);
60
+ }, onClose: () => {
61
+ setOpen(false);
62
+ maintainFocusAfterClose();
63
+ }, slotProps: {
57
64
  field: {
65
+ inputRef: setInputRef,
58
66
  clearable,
59
- onClear: () => onChange(null),
67
+ onClear: () => {
68
+ onChange(null);
69
+ },
60
70
  },
61
71
  clearButton: {
62
72
  tabIndex: -1,
@@ -67,6 +77,7 @@ function DateTimePicker({ control, defaultValue, disabled = false, label, readOn
67
77
  error,
68
78
  label: styling === "default" ? label : undefined,
69
79
  required: styling === "default" ? required : undefined,
80
+ inputRef: setInputRef,
70
81
  InputProps: {
71
82
  endAdornment: ((0, jsx_runtime_1.jsx)(Actions_1.CalendarIconAction, { showTooltip: false, disabled: disabled, onClick: () => setOpen(true) })),
72
83
  sx: {
@@ -77,6 +88,14 @@ function DateTimePicker({ control, defaultValue, disabled = false, label, readOn
77
88
  },
78
89
  sx: (0, commonStyles_1.getDefaultTextFieldSx)(styling),
79
90
  InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling),
91
+ onKeyDown: (event) => {
92
+ handleKeyDown(event, () => {
93
+ setOpen(false);
94
+ }, open);
95
+ if (event.key === "Backspace" && clearable) {
96
+ onChange(null);
97
+ }
98
+ },
80
99
  },
81
100
  popper: {
82
101
  sx: {
@@ -165,8 +184,11 @@ function DateTimePicker({ control, defaultValue, disabled = false, label, readOn
165
184
  switchViewIcon: EmptyIcon,
166
185
  }, shouldDisableTime: () => !pickerValue, onChange: (value) => {
167
186
  if (value?.isValid) {
168
- return onChange(value.toUTC().toISO());
187
+ onChange(value.toUTC().toISO());
188
+ maintainFocus();
189
+ return;
169
190
  }
170
191
  onChange(value);
192
+ maintainFocus();
171
193
  } })] }));
172
194
  }
package/packages/shared-components/dist/FormFields/PhoneInputField/PhoneInputField.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PhoneInputField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/PhoneInputField/PhoneInputField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAI3D,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,IACpD,kBAAkB,CAAC,CAAC,CAAC,GACnB,IAAI,CAAC,eAAe,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEN,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EAAE,EACrD,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,KAAK,EACL,QAAgB,EAChB,QAAQ,EACR,IAAI,EACJ,OAAe,EACf,WAAgB,EAChB,KAAK,EACL,UAAU,EACV,GAAG,eAAe,EACnB,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAiFzB"}
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,2CAmMzB"}
package/packages/shared-components/dist/FormFields/PhoneInputField/PhoneInputField.js CHANGED
@@ -7,43 +7,123 @@ exports.PhoneInputField = PhoneInputField;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  /* eslint-disable sonarjs/no-nested-conditional */
9
9
  const material_1 = require("@mui/material");
10
+ const react_1 = require("react");
10
11
  const react_hook_form_1 = require("react-hook-form");
11
12
  const react_phone_input_2_1 = __importDefault(require("react-phone-input-2"));
13
+ const utils_1 = require("../../utils");
12
14
  const Skeleton_1 = require("./Skeleton");
13
15
  function PhoneInputField({ control, name, defaultValue, rules, label, disabled = false, required, rows, loading = false, placeholder = "", error, helperText, ...phoneInputProps }) {
14
16
  const theme = (0, material_1.useTheme)();
15
- const { iron, red } = theme.palette.app.color;
17
+ const { iron, red, butterflyBlue } = theme.palette.app.color;
16
18
  const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({
17
19
  name,
18
20
  control,
19
21
  defaultValue,
20
22
  rules,
21
23
  });
24
+ const [dropdownOpen, setDropdownOpen] = (0, react_1.useState)(false);
25
+ const { setInputRef, maintainFocusAfterClose } = (0, utils_1.useFormFieldFocus)(dropdownOpen);
26
+ const containerRef = (0, react_1.useRef)(null);
27
+ (0, react_1.useEffect)(() => {
28
+ const container = containerRef.current;
29
+ if (!container) {
30
+ return;
31
+ }
32
+ const mainInput = container.querySelector("input[type='tel']");
33
+ if (mainInput) {
34
+ setInputRef(mainInput);
35
+ restField.ref(mainInput);
36
+ }
37
+ const checkDropdownState = () => {
38
+ const dropdown = container.querySelector(".flag-dropdown.open");
39
+ const isOpen = !!dropdown;
40
+ setDropdownOpen(isOpen);
41
+ if (isOpen) {
42
+ setTimeout(() => {
43
+ const searchInput = container.querySelector(".country-list .search-box input");
44
+ if (searchInput) {
45
+ searchInput.focus();
46
+ }
47
+ }, 0);
48
+ }
49
+ };
50
+ const observer = new MutationObserver(checkDropdownState);
51
+ observer.observe(container, {
52
+ attributes: true,
53
+ attributeFilter: ["class"],
54
+ subtree: true,
55
+ childList: true,
56
+ });
57
+ const handleClick = (e) => {
58
+ const target = e.target;
59
+ if (target.closest(".flag-dropdown") || target.closest(".country-list")) {
60
+ setTimeout(checkDropdownState, 0);
61
+ }
62
+ };
63
+ const handleClickOutside = (e) => {
64
+ const target = e.target;
65
+ if (!target.closest(".flag-dropdown") &&
66
+ !target.closest(".country-list")) {
67
+ setTimeout(checkDropdownState, 0);
68
+ }
69
+ };
70
+ container.addEventListener("click", handleClick);
71
+ document.addEventListener("click", handleClickOutside);
72
+ checkDropdownState();
73
+ return () => {
74
+ observer.disconnect();
75
+ container.removeEventListener("click", handleClick);
76
+ document.removeEventListener("click", handleClickOutside);
77
+ };
78
+ }, [setInputRef, restField]);
22
79
  if (loading) {
23
80
  return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, rows: rows });
24
81
  }
25
- return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "4px", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsx)(react_phone_input_2_1.default, { country: "in", enableSearch: true, disabled: disabled, placeholder: placeholder || label, onChange: (phone) => {
26
- onChange(phone);
27
- }, value: value, containerStyle: {
28
- width: "100%",
29
- border: error
30
- ? `1px solid ${red[900]}`
31
- : disabled
32
- ? `1px solid ${iron[700]}`
33
- : `1px solid ${iron[800]}`,
34
- borderRadius: "4px",
35
- }, inputStyle: {
36
- width: "100%",
37
- paddingTop: "19px",
38
- paddingBottom: "19px",
39
- fontSize: "16px",
40
- border: "none",
41
- opacity: 1,
42
- color: disabled ? iron[100] : "revert-layer",
43
- background: disabled ? iron[50] : "revert-layer",
44
- }, buttonStyle: {
45
- border: "none",
46
- }, inputProps: { ...restField }, ...phoneInputProps })] }), error && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: {
82
+ return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "4px", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsx)(material_1.Box, { ref: containerRef, sx: {
83
+ "& .phone-input-container": {
84
+ "&:focus-within": {
85
+ border: error
86
+ ? `2px solid ${red[900]} !important`
87
+ : `2px solid ${butterflyBlue[900]} !important`,
88
+ },
89
+ },
90
+ "& .phone-input-field:focus": {
91
+ "& ~ .flag-dropdown": {
92
+ borderColor: error ? red[900] : butterflyBlue[900],
93
+ },
94
+ },
95
+ "& .flag-dropdown": {
96
+ "&.open": {
97
+ borderColor: error ? red[900] : butterflyBlue[900],
98
+ },
99
+ },
100
+ }, children: (0, jsx_runtime_1.jsx)(react_phone_input_2_1.default, { country: "in", enableSearch: true, disabled: disabled, placeholder: placeholder || label, onChange: (phone) => {
101
+ onChange(phone);
102
+ }, value: value, onBlur: () => {
103
+ restField.onBlur();
104
+ if (!dropdownOpen) {
105
+ maintainFocusAfterClose();
106
+ }
107
+ }, containerStyle: {
108
+ width: "100%",
109
+ border: error
110
+ ? `1px solid ${red[900]}`
111
+ : disabled
112
+ ? `1px solid ${iron[700]}`
113
+ : `1px solid ${iron[800]}`,
114
+ borderRadius: "4px",
115
+ transition: "all 0.2s ease",
116
+ }, inputStyle: {
117
+ width: "100%",
118
+ paddingTop: "19px",
119
+ paddingBottom: "19px",
120
+ fontSize: "16px",
121
+ border: "none",
122
+ outline: "none",
123
+ transition: "all 0.2s ease",
124
+ }, containerClass: "phone-input-container", inputClass: "phone-input-field", buttonStyle: {
125
+ border: "none",
126
+ }, ...phoneInputProps }) })] }), error && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: {
47
127
  color: "red",
48
128
  whiteSpace: "pre",
49
129
  textWrap: "wrap",
package/packages/shared-components/dist/FormFields/Rating/Ratting.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Ratting.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Rating/Ratting.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAElE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,EAAE,EACrE,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAU,EACV,KAAK,EACL,QAAQ,EACR,OAAe,EACf,SAAoB,EACpB,QAAgB,EAChB,GAAG,WAAW,EACf,EAAE,WAAW,CAAC,CAAC,CAAC,2CA2ChB"}
1
+ {"version":3,"file":"Ratting.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Rating/Ratting.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGlE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,EAAE,EACrE,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAU,EACV,KAAK,EACL,QAAQ,EACR,OAAe,EACf,SAAoB,EACpB,QAAgB,EAChB,GAAG,WAAW,EACf,EAAE,WAAW,CAAC,CAAC,CAAC,2CA8ChB"}
package/packages/shared-components/dist/FormFields/Rating/Ratting.js CHANGED
@@ -4,9 +4,11 @@ exports.Rating = Rating;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const material_1 = require("@mui/material");
6
6
  const react_hook_form_1 = require("react-hook-form");
7
+ const utils_1 = require("../../utils");
7
8
  const Skeleton_1 = require("./Skeleton");
8
9
  function Rating({ control, name, defaultValue, label = "", rules, disabled, loading = false, direction = "column", required = false, ...ratingProps }) {
9
10
  const { field: { value, onChange, ...restField }, fieldState: { error }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
11
+ const { maintainFocus } = (0, utils_1.useFormFieldFocus)();
10
12
  if (loading) {
11
13
  return (0, jsx_runtime_1.jsx)(Skeleton_1.RatingSkeleton, { label: label });
12
14
  }
@@ -15,5 +17,6 @@ function Rating({ control, name, defaultValue, label = "", rules, disabled, load
15
17
  marginBottom: direction === "row" ? 0 : "auto",
16
18
  }, required: required, children: label })), (0, jsx_runtime_1.jsx)(material_1.Rating, { disabled: disabled, value: value ?? null, onChange: (event, newValue) => {
17
19
  onChange(newValue);
20
+ maintainFocus();
18
21
  }, ...restField, ...ratingProps })] }), error && (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { error: true, children: error?.message })] }));
19
22
  }
package/packages/shared-components/dist/FormFields/Select/Select.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AAmBnE,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAUzB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACpE,IAAI,CACF,cAAc,EACd,MAAM,qBAAqB,CAAC,CAAC,CAAC,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CACnE,GAAG;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;IACxE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC,CAAC;AAEJ,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,EAAE,EAC5C,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,QAAgB,EAChB,OAAY,EACZ,KAAK,EACL,OAAe,EACf,UAAU,EACV,KAAK,EACL,WAAgB,EAChB,eAAsB,EACtB,YAAoB,EACpB,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,eAAmB,EACnB,gBAA0C,EAC1C,gBAAwB,EACxB,OAAkB,EAClB,GAAG,SAAS,EACb,EAAE,WAAW,CAAC,CAAC,CAAC,2CAmdhB"}
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,2CAyehB"}
package/packages/shared-components/dist/FormFields/Select/Select.js CHANGED
@@ -9,6 +9,7 @@ const react_hook_form_1 = require("react-hook-form");
9
9
  const react_i18next_1 = require("react-i18next");
10
10
  const Actions_1 = require("../../Actions");
11
11
  const Toast_1 = require("../../Toast");
12
+ const utils_1 = require("../../utils");
12
13
  const CheckBox_styled_1 = require("../CheckBox/CheckBox.styled");
13
14
  const commonStyles_1 = require("../commonStyles");
14
15
  const Select_styled_1 = require("./Select.styled");
@@ -25,6 +26,8 @@ function Select({ control, defaultValue, name, required = false, label, multiple
25
26
  const disabledColor = disabled ? iron[900] : "revert-layer";
26
27
  const [pendingValue, setPendingValue] = (0, react_1.useState)(null);
27
28
  const hasPendingChange = (0, react_1.useRef)(false);
29
+ const [open, setOpen] = (0, react_1.useState)(false);
30
+ const { setInputRef, maintainFocusAfterClose, handleKeyDown } = (0, utils_1.useFormFieldFocus)(open);
28
31
  const handleSelectAll = (isSelected) => {
29
32
  if (isSelected) {
30
33
  const allValues = options
@@ -194,12 +197,20 @@ function Select({ control, defaultValue, name, required = false, label, multiple
194
197
  }
195
198
  onChange(newValue);
196
199
  }
200
+ }, open: open, onOpen: () => {
201
+ setOpen(true);
197
202
  }, onClose: () => {
203
+ setOpen(false);
204
+ maintainFocusAfterClose();
198
205
  if (setOnFinalChange && hasPendingChange.current) {
199
206
  onChange(pendingValue);
200
207
  hasPendingChange.current = false;
201
208
  setPendingValue(null);
202
209
  }
210
+ }, inputRef: setInputRef, onKeyDown: (event) => {
211
+ handleKeyDown(event, () => {
212
+ setOpen(false);
213
+ }, open);
203
214
  }, renderValue: restProps.renderValue ?? renderValue,
204
215
  // eslint-disable-next-line sonarjs/no-unstable-nested-components
205
216
  IconComponent: (props) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
package/packages/shared-components/dist/FormFields/SwitchField/SwitchField.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SwitchField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/SwitchField/SwitchField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAEhE,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACzE,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,EACjD,IAAI,EACJ,KAAK,EACL,OAAO,EACP,YAAY,EACZ,OAAe,EACf,GAAG,eAAe,EACnB,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CA4DrB"}
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"}
package/packages/shared-components/dist/FormFields/SwitchField/SwitchField.js CHANGED
@@ -3,17 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.SwitchField = SwitchField;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const material_1 = require("@mui/material");
6
- const material_2 = require("@mui/material");
7
6
  const react_hook_form_1 = require("react-hook-form");
7
+ const utils_1 = require("../../utils");
8
8
  const Skeleton_1 = require("./Skeleton");
9
9
  function SwitchField({ name, rules, control, defaultValue, loading = false, ...restSwitchProps }) {
10
- const theme = (0, material_2.useTheme)();
10
+ const theme = (0, material_1.useTheme)();
11
11
  const { butterflyBlue, iron } = theme.palette.app.color;
12
12
  const { field: { value = false, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
13
+ const { setInputRef, maintainFocus } = (0, utils_1.useFormFieldFocus)();
13
14
  if (loading) {
14
15
  return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {});
15
16
  }
16
- return ((0, jsx_runtime_1.jsx)(material_2.Switch, { checked: value, ...restField, ...restSwitchProps, sx: {
17
+ return ((0, jsx_runtime_1.jsx)(material_1.Switch, { checked: value, ...restField, ...restSwitchProps, inputRef: setInputRef, onChange: (event) => {
18
+ restField.onChange(event);
19
+ maintainFocus();
20
+ }, sx: {
17
21
  padding: 1,
18
22
  "& .MuiSwitch-track": {
19
23
  borderRadius: 11,
package/packages/shared-components/dist/FormFields/TextField/TextField.d.ts CHANGED
@@ -22,6 +22,7 @@ export type TextFieldProps<P extends FieldValues> = UseControllerProps<P> & Omit
22
22
  message: string | null;
23
23
  regex: RegExp;
24
24
  };
25
+ customOnChange?: (value: string | null | number) => void;
25
26
  };
26
- export declare function TextField<P extends FieldValues>({ control, name, defaultValue, label, rules, type, required, disabled, loading, placeholder, isCapitalize, isTrimStartDisabled, rows, characterType, letterCase, setError, containerProps, styling, infoMessage, regexExpression, ...inputFieldProps }: TextFieldProps<P>): import("react/jsx-runtime").JSX.Element;
27
+ export declare function TextField<P extends FieldValues>({ control, name, defaultValue, label, rules, type, required, disabled, loading, placeholder, isCapitalize, isTrimStartDisabled, rows, characterType, letterCase, setError, containerProps, styling, infoMessage, regexExpression, customOnChange, ...inputFieldProps }: TextFieldProps<P>): import("react/jsx-runtime").JSX.Element;
27
28
  //# sourceMappingURL=TextField.d.ts.map
package/packages/shared-components/dist/FormFields/TextField/TextField.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,IAAI,iBAAiB,EACxC,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAWzB,MAAM,MAAM,oBAAoB,GAC5B,QAAQ,GACR,eAAe,GACf,uBAAuB,GACvB,gBAAgB,GAChB,oBAAoB,GACpB,QAAQ,CAAC;AAEb,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,OAAO,CAAC;AAY7D,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACvE,IAAI,CAAC,iBAAiB,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,CACT,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,eAAe,CAAC,EAAE;QAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEJ,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,EAAE,EAC/C,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAU,EACV,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAe,EACf,WAAgB,EAChB,YAAoB,EACpB,mBAA2B,EAC3B,IAAI,EACJ,aAAuC,EACvC,UAAoB,EACpB,QAAQ,EACR,cAAc,EACd,OAAkB,EAClB,WAAW,EACX,eAGC,EACD,GAAG,eAAe,EACnB,EAAE,cAAc,CAAC,CAAC,CAAC,2CAoJnB"}
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,GAAG,eAAe,EACnB,EAAE,cAAc,CAAC,CAAC,CAAC,2CAiKnB"}
package/packages/shared-components/dist/FormFields/TextField/TextField.js CHANGED
@@ -6,6 +6,7 @@ const material_1 = require("@mui/material");
6
6
  const react_hook_form_1 = require("react-hook-form");
7
7
  const icons_material_1 = require("@mui/icons-material");
8
8
  const Tooltip_1 = require("../../Tooltip");
9
+ const hooks_1 = require("../../utils/hooks");
9
10
  const commonStyles_1 = require("../commonStyles");
10
11
  const Skeleton_1 = require("./Skeleton");
11
12
  const characterTypeMessages = {
@@ -19,8 +20,9 @@ const characterTypeMessages = {
19
20
  function TextField({ control, name, defaultValue, label = "", rules, type, required, disabled, loading = false, placeholder = "", isCapitalize = false, isTrimStartDisabled = false, rows, characterType = "string-number-special", letterCase = "mixed", setError, containerProps, styling = "custom", infoMessage, regexExpression = {
20
21
  message: null,
21
22
  regex: /^[\s\S]*$/,
22
- }, ...inputFieldProps }) {
23
+ }, customOnChange, ...inputFieldProps }) {
23
24
  const { field: { value, onChange, ...restField }, fieldState: { error }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
25
+ const { inputRef, maintainFocus } = (0, hooks_1.useFormFieldFocus)();
24
26
  const handleKeyDown = (event) => {
25
27
  if (event.key === "-" && type === "number") {
26
28
  event.preventDefault();
@@ -70,7 +72,7 @@ function TextField({ control, name, defaultValue, label = "", rules, type, requi
70
72
  }
71
73
  return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { ...containerProps, gap: "5px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label }), infoMessage && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: infoMessage, children: (0, jsx_runtime_1.jsx)(icons_material_1.InfoOutlined, { sx: {
72
74
  fontSize: 13,
73
- } }) }))] })), (0, jsx_runtime_1.jsx)(material_1.TextField, { disabled: disabled, required: required, fullWidth: true, onKeyDown: handleKeyDown, placeholder: styling === "default" ? placeholder : placeholder || label, type: type, label: styling === "default" ? label : undefined, sx: (0, commonStyles_1.getDefaultTextFieldSx)(styling), InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling), inputProps: {
75
+ } }) }))] })), (0, jsx_runtime_1.jsx)(material_1.TextField, { disabled: disabled, required: required, fullWidth: true, inputRef: inputRef, onKeyDown: handleKeyDown, placeholder: styling === "default" ? placeholder : placeholder || label, type: type, label: styling === "default" ? label : undefined, sx: (0, commonStyles_1.getDefaultTextFieldSx)(styling), InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling), inputProps: {
74
76
  min: 0,
75
77
  }, error: Boolean(error), helperText: error?.message, onChange: (event) => {
76
78
  const input = event.target;
@@ -89,17 +91,22 @@ function TextField({ control, name, defaultValue, label = "", rules, type, requi
89
91
  return;
90
92
  }
91
93
  }
94
+ let finalValue = cleanedVal;
92
95
  if (value && type === "number") {
93
- onChange(Number(value));
96
+ finalValue = Number(value);
94
97
  }
95
- else if (isCapitalize) {
96
- onChange(cleanedVal ? cleanedVal.toUpperCase() : null);
98
+ else if (isCapitalize && cleanedVal) {
99
+ finalValue = cleanedVal ? cleanedVal.toUpperCase() : null;
97
100
  }
98
- else {
99
- onChange(cleanedVal);
101
+ onChange(finalValue);
102
+ if (customOnChange) {
103
+ customOnChange(value);
100
104
  }
101
105
  requestAnimationFrame(() => {
102
- input.setSelectionRange(selectionStart, selectionEnd);
106
+ if (type == "text") {
107
+ input.setSelectionRange(selectionStart, selectionEnd);
108
+ }
109
+ maintainFocus();
103
110
  });
104
111
  }, value: typeof value === "string" ? value.trimStart() : (value ?? ""), ...restField, ...inputFieldProps })] }));
105
112
  }
package/packages/shared-components/dist/FormFields/TimeField/TimeField.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TimeField/TimeField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAEL,KAAK,cAAc,IAAI,iBAAiB,EACzC,MAAM,+BAA+B,CAAC;AAEvC,OAAO,KAAK,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAQzB,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACvE,iBAAiB,CAAC,eAAe,CAAC,GAClC,OAAO,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,OAAO,CAAC;IAC3B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC,CAAC,CAAC;AAEL,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,EAAE,EAC/C,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,KAAK,EACL,MAAgB,EAChB,iBAAyB,EACzB,oBAA4B,EAC5B,OAAkB,EAClB,GAAG,SAAS,EACb,EAAE,cAAc,CAAC,CAAC,CAAC,2CAkFnB"}
1
+ {"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TimeField/TimeField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAEL,KAAK,cAAc,IAAI,iBAAiB,EACzC,MAAM,+BAA+B,CAAC;AAEvC,OAAO,KAAK,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AASzB,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACvE,iBAAiB,CAAC,eAAe,CAAC,GAClC,OAAO,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,OAAO,CAAC;IAC3B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC,CAAC,CAAC;AAEL,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,EAAE,EAC/C,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,KAAK,EACL,MAAgB,EAChB,iBAAyB,EACzB,oBAA4B,EAC5B,OAAkB,EAClB,GAAG,SAAS,EACb,EAAE,cAAc,CAAC,CAAC,CAAC,2CA6FnB"}
package/packages/shared-components/dist/FormFields/TimeField/TimeField.js CHANGED
@@ -6,10 +6,12 @@ const material_1 = require("@mui/material");
6
6
  const TimeField_1 = require("@mui/x-date-pickers/TimeField");
7
7
  const luxon_1 = require("luxon");
8
8
  const react_hook_form_1 = require("react-hook-form");
9
+ const hooks_1 = require("../../utils/hooks");
9
10
  const commonStyles_1 = require("../commonStyles");
10
11
  const Skeleton_1 = require("./Skeleton");
11
12
  function TimeField({ control, defaultValue, disabled = false, label, name, error, helperText, loading = false, required = false, rules, format = "HH:mm", isReturnLocalTime = false, isReturnDateWithTime = false, styling = "custom", ...restProps }) {
12
13
  const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
14
+ const { inputRef, maintainFocus } = (0, hooks_1.useFormFieldFocus)();
13
15
  const theme = (0, material_1.useTheme)();
14
16
  const { butterflyBlue } = theme.palette.app.color;
15
17
  if (error && value && typeof value === "object") {
@@ -24,15 +26,21 @@ function TimeField({ control, defaultValue, disabled = false, label, name, error
24
26
  return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsx)(TimeField_1.TimeField, { ...restField, ...restProps, disabled: disabled, value: pickerValue, onChange: (value) => {
25
27
  if (value?.isValid) {
26
28
  if (isReturnLocalTime) {
27
- return onChange(value.toFormat(format));
29
+ onChange(value.toFormat(format));
30
+ maintainFocus();
31
+ return;
28
32
  }
29
33
  if (isReturnDateWithTime) {
30
- return onChange(value.toUTC().toISO());
34
+ onChange(value.toUTC().toISO());
35
+ maintainFocus();
36
+ return;
31
37
  }
32
38
  onChange(value.toUTC().toISOTime());
39
+ maintainFocus();
33
40
  }
34
41
  else {
35
42
  onChange(value);
43
+ maintainFocus();
36
44
  }
37
45
  }, slotProps: {
38
46
  textField: {
@@ -41,6 +49,7 @@ function TimeField({ control, defaultValue, disabled = false, label, name, error
41
49
  error,
42
50
  label: styling === "default" ? label : undefined,
43
51
  required: styling === "default" ? required : undefined,
52
+ inputRef,
44
53
  InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling),
45
54
  sx: {
46
55
  ...(0, commonStyles_1.getDefaultTextFieldSx)(styling),
package/packages/shared-components/dist/FormFields/TimePicker/TimePicker.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAE5F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,EAAE,KAAK,YAAY,EAAY,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAQzB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACxE,kBAAkB,CAAC,eAAe,CAAC,GACnC,OAAO,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC,CAAC,CAAC;AAEL,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,KAAK,EACL,MAAgB,EAChB,iBAAyB,EACzB,oBAA4B,EAC5B,gBAAoB,EACpB,UAAU,EACV,WAAW,EACX,cAAc,EACd,OAAkB,EAClB,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CA6HpB"}
1
+ {"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAE5F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,EAAE,KAAK,YAAY,EAAY,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AASzB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACxE,kBAAkB,CAAC,eAAe,CAAC,GACnC,OAAO,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC,CAAC,CAAC;AAEL,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,KAAK,EACL,MAAgB,EAChB,iBAAyB,EACzB,oBAA4B,EAC5B,gBAAoB,EACpB,UAAU,EACV,WAAW,EACX,cAAc,EACd,OAAkB,EAClB,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CA+IpB"}
package/packages/shared-components/dist/FormFields/TimePicker/TimePicker.js CHANGED
@@ -7,11 +7,13 @@ const TimePicker_1 = require("@mui/x-date-pickers/TimePicker");
7
7
  const luxon_1 = require("luxon");
8
8
  const react_1 = require("react");
9
9
  const react_hook_form_1 = require("react-hook-form");
10
+ const hooks_1 = require("../../utils/hooks");
10
11
  const commonStyles_1 = require("../commonStyles");
11
12
  const Skeleton_1 = require("./Skeleton");
12
13
  function TimePicker({ control, defaultValue, disabled = false, label, readOnly = false, name, error = false, helperText, loading = false, required = false, rules, format = "HH:mm", isReturnLocalTime = false, isReturnDateWithTime = false, timeStepsMinutes = 1, helperIcon, toolTipText, containerProps, styling = "custom", ...restProps }) {
13
14
  const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
14
15
  const [open, setOpen] = (0, react_1.useState)(false);
16
+ const { setInputRef, maintainFocus, maintainFocusAfterClose, handleKeyDown } = (0, hooks_1.useFormFieldFocus)(open);
15
17
  if (error && value && typeof value === "object") {
16
18
  helperText = "Invalid time";
17
19
  }
@@ -23,13 +25,17 @@ function TimePicker({ control, defaultValue, disabled = false, label, readOnly =
23
25
  if (loading) {
24
26
  return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, styling: styling });
25
27
  }
26
- return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", ...containerProps, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "center", flexDirection: "row", gap: "5px", children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label }), helperIcon && toolTipText && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: toolTipText, placement: "bottom", children: helperIcon }))] })), (0, jsx_runtime_1.jsx)(TimePicker_1.TimePicker, { ...restField, ...restProps, disabled: disabled, readOnly: readOnly, open: open, ampm: false, value: pickerValue, format: format, onOpen: () => setOpen(true), onClose: () => setOpen(false), timeSteps: { minutes: timeStepsMinutes }, slotProps: {
28
+ return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", ...containerProps, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "center", flexDirection: "row", gap: "5px", children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label }), helperIcon && toolTipText && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: toolTipText, placement: "bottom", children: helperIcon }))] })), (0, jsx_runtime_1.jsx)(TimePicker_1.TimePicker, { ...restField, ...restProps, disabled: disabled, readOnly: readOnly, open: open, ampm: false, value: pickerValue, format: format, onOpen: () => setOpen(true), onClose: () => {
29
+ setOpen(false);
30
+ maintainFocusAfterClose();
31
+ }, timeSteps: { minutes: timeStepsMinutes }, slotProps: {
27
32
  textField: {
28
33
  disabled,
29
34
  helperText,
30
35
  error,
31
36
  label: styling === "default" ? label : undefined,
32
37
  required: styling === "default" ? required : undefined,
38
+ inputRef: setInputRef,
33
39
  InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling),
34
40
  sx: {
35
41
  ...(0, commonStyles_1.getDefaultTextFieldSx)(styling),
@@ -39,6 +45,9 @@ function TimePicker({ control, defaultValue, disabled = false, label, readOnly =
39
45
  borderRadius: "5px",
40
46
  },
41
47
  },
48
+ onKeyDown: (event) => {
49
+ handleKeyDown(event, () => setOpen(false), open);
50
+ },
42
51
  },
43
52
  popper: {
44
53
  sx: {
@@ -76,15 +85,21 @@ function TimePicker({ control, defaultValue, disabled = false, label, readOnly =
76
85
  }, onChange: (value) => {
77
86
  if (value?.isValid) {
78
87
  if (isReturnLocalTime) {
79
- return onChange(value.toFormat(format));
88
+ onChange(value.toFormat(format));
89
+ maintainFocus();
90
+ return;
80
91
  }
81
92
  if (isReturnDateWithTime) {
82
- return onChange(value.toUTC().toISO());
93
+ onChange(value.toUTC().toISO());
94
+ maintainFocus();
95
+ return;
83
96
  }
84
97
  onChange(value.toUTC().toISOTime());
98
+ maintainFocus();
85
99
  }
86
100
  else {
87
101
  onChange(value);
102
+ maintainFocus();
88
103
  }
89
104
  } })] }));
90
105
  }
package/packages/shared-components/dist/SmartGrid/exportUtils/helper.js CHANGED
@@ -46,7 +46,7 @@ const formatCellForExcel = (value, rowType, isGroupingColumn) => {
46
46
  if (rowType !== "data" && value === "") {
47
47
  return "";
48
48
  }
49
- if (!value) {
49
+ if (value === null || value == undefined || value === "") {
50
50
  return isGroupingColumn ? "" : "-";
51
51
  }
52
52
  if (typeof value === "boolean") {
package/packages/shared-components/dist/utils/hooks/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
+ export * from "./useDialogActions";
2
+ export * from "./useFormFieldFocus";
1
3
  export * from "./useGetDeviceType";
2
4
  export * from "./useGlobalKeyboardShortcut";
3
- export * from "./useDialogActions";
4
5
  //# sourceMappingURL=index.d.ts.map
package/packages/shared-components/dist/utils/hooks/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oBAAoB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,6BAA6B,CAAC"}
package/packages/shared-components/dist/utils/hooks/index.js CHANGED
@@ -14,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
14
  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./useDialogActions"), exports);
18
+ __exportStar(require("./useFormFieldFocus"), exports);
17
19
  __exportStar(require("./useGetDeviceType"), exports);
18
20
  __exportStar(require("./useGlobalKeyboardShortcut"), exports);
19
- __exportStar(require("./useDialogActions"), exports);
package/packages/shared-components/dist/utils/hooks/useFormFieldFocus.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ export declare function useFormFieldFocus(isOpen?: boolean | undefined): {
2
+ inputRef: import("react").MutableRefObject<HTMLInputElement | null>;
3
+ setInputRef: (ref: HTMLInputElement | null) => void;
4
+ maintainFocus: () => void;
5
+ maintainFocusAfterClose: () => void;
6
+ handleKeyDown: <T extends HTMLElement = HTMLElement>(event: React.KeyboardEvent<T>, onClose?: () => void, isPopupOpen?: boolean) => void;
7
+ };
8
+ //# sourceMappingURL=useFormFieldFocus.d.ts.map
package/packages/shared-components/dist/utils/hooks/useFormFieldFocus.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useFormFieldFocus.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/useFormFieldFocus.ts"],"names":[],"mappings":"AAEA,wBAAgB,iBAAiB,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS;;uBA6CtB,gBAAgB,GAAG,IAAI;;;oBAf1D,CAAC,SAAS,WAAW,uBACb,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,YACnB,MAAM,IAAI,gBACN,OAAO;EAyB1B"}
package/packages/shared-components/dist/utils/hooks/useFormFieldFocus.js ADDED
@@ -0,0 +1,48 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useFormFieldFocus = useFormFieldFocus;
4
+ const react_1 = require("react");
5
+ function useFormFieldFocus(isOpen) {
6
+ const inputRef = (0, react_1.useRef)(null);
7
+ const shouldMaintainFocusRef = (0, react_1.useRef)(false);
8
+ (0, react_1.useEffect)(() => {
9
+ if (!isOpen && shouldMaintainFocusRef.current && inputRef.current) {
10
+ shouldMaintainFocusRef.current = false;
11
+ setTimeout(() => {
12
+ requestAnimationFrame(() => {
13
+ if (inputRef.current) {
14
+ inputRef.current.focus();
15
+ }
16
+ });
17
+ }, 10);
18
+ }
19
+ }, [isOpen]);
20
+ const maintainFocus = (0, react_1.useCallback)(() => {
21
+ requestAnimationFrame(() => {
22
+ inputRef.current?.focus();
23
+ });
24
+ }, []);
25
+ const maintainFocusAfterClose = (0, react_1.useCallback)(() => {
26
+ shouldMaintainFocusRef.current = true;
27
+ }, []);
28
+ const handleKeyDown = (0, react_1.useCallback)((event, onClose, isPopupOpen) => {
29
+ if (isPopupOpen && (event.key === "Tab" || event.key === "Escape")) {
30
+ event.preventDefault();
31
+ event.stopPropagation();
32
+ onClose?.();
33
+ maintainFocusAfterClose();
34
+ }
35
+ }, [maintainFocusAfterClose]);
36
+ const setInputRef = (0, react_1.useCallback)((ref) => {
37
+ if (ref) {
38
+ inputRef.current = ref;
39
+ }
40
+ }, []);
41
+ return {
42
+ inputRef,
43
+ setInputRef,
44
+ maintainFocus,
45
+ maintainFocusAfterClose,
46
+ handleKeyDown,
47
+ };
48
+ }