@codezee/sixtify-brahma 0.2.158 → 0.2.159
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.
- package/package.json +1 -1
- package/packages/shared-components/dist/Breadcrumbs/Breadcrumbs.d.ts.map +1 -1
- package/packages/shared-components/dist/Breadcrumbs/Breadcrumbs.js +6 -1
- package/packages/shared-components/dist/Pagination/Pagination.d.ts.map +1 -1
- package/packages/shared-components/dist/Pagination/Pagination.js +2 -1
- package/packages/shared-components/dist/SmartGrid/Components/EditableFields/SmartSelectField.d.ts +7 -0
- package/packages/shared-components/dist/SmartGrid/Components/EditableFields/SmartSelectField.d.ts.map +1 -0
- package/packages/shared-components/dist/SmartGrid/Components/EditableFields/SmartSelectField.js +58 -0
- package/packages/shared-components/dist/SmartGrid/Components/EditableFields/SmartTextField.d.ts +5 -0
- package/packages/shared-components/dist/SmartGrid/Components/EditableFields/SmartTextField.d.ts.map +1 -0
- package/packages/shared-components/dist/SmartGrid/Components/EditableFields/SmartTextField.js +59 -0
- package/packages/shared-components/dist/SmartGrid/Components/EditableFields/SmartTooltip.d.ts +9 -0
- package/packages/shared-components/dist/SmartGrid/Components/EditableFields/SmartTooltip.d.ts.map +1 -0
- package/packages/shared-components/dist/SmartGrid/Components/EditableFields/SmartTooltip.js +113 -0
- package/packages/shared-components/dist/SmartGrid/Components/EditableFields/index.d.ts +4 -0
- package/packages/shared-components/dist/SmartGrid/Components/EditableFields/index.d.ts.map +1 -0
- package/packages/shared-components/dist/SmartGrid/Components/EditableFields/index.js +19 -0
- package/packages/shared-components/dist/SmartGrid/Components/index.d.ts +2 -0
- package/packages/shared-components/dist/SmartGrid/Components/index.d.ts.map +1 -0
- package/packages/shared-components/dist/SmartGrid/Components/index.js +17 -0
- package/packages/shared-components/dist/SmartGrid/index.d.ts +1 -0
- package/packages/shared-components/dist/SmartGrid/index.d.ts.map +1 -1
- package/packages/shared-components/dist/SmartGrid/index.js +1 -0
- package/packages/shared-components/dist/utils/hooks/useFormFieldFocus.d.ts.map +1 -1
- package/packages/shared-components/dist/utils/hooks/useFormFieldFocus.js +3 -1
- package/packages/shared-components/dist/utils/theme/colorPalette.js +1 -1
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,KAAK,cAAc,GAAG;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,WAAW,eAAe,
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,KAAK,cAAc,GAAG;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,WAAW,eAAe,4CA+ErD,CAAC"}
|
|
@@ -25,13 +25,18 @@ const Breadcrumbs = ({ items }) => {
|
|
|
25
25
|
}, children: items.map((item) => {
|
|
26
26
|
const { icon, text, onClick } = item;
|
|
27
27
|
if (onClick) {
|
|
28
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: onClick,
|
|
28
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: onClick, sx: {
|
|
29
29
|
background: "none",
|
|
30
30
|
border: "none",
|
|
31
31
|
padding: 0,
|
|
32
32
|
cursor: "pointer",
|
|
33
33
|
display: "flex",
|
|
34
34
|
alignItems: "center",
|
|
35
|
+
"&:hover": {
|
|
36
|
+
"& .MuiTypography-root": {
|
|
37
|
+
color: butterflyBlue[900],
|
|
38
|
+
},
|
|
39
|
+
},
|
|
35
40
|
}, children: [icon && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { sx: {
|
|
36
41
|
color: butterflyBlue[900],
|
|
37
42
|
}, children: icon })), text && (0, jsx_runtime_1.jsx)(material_1.Typography, { children: text })] }, (0, uuid_1.v4)()));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EAE1B,MAAM,eAAe,CAAC;AAGvB,eAAO,MAAM,UAAU,GAAI,0EAOxB,oBAAoB,
|
|
1
|
+
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EAE1B,MAAM,eAAe,CAAC;AAGvB,eAAO,MAAM,UAAU,GAAI,0EAOxB,oBAAoB,4CA0CtB,CAAC"}
|
|
@@ -9,6 +9,7 @@ const Pagination = ({ count, page, onPageChange, rowsPerPage, onRowsPerPageChang
|
|
|
9
9
|
const { grey } = theme.palette;
|
|
10
10
|
const { layout } = (0, utils_1.useGetDeviceType)();
|
|
11
11
|
const isMobile = layout === "mobile";
|
|
12
|
+
const rowsPerPageOptions = [20, 50, 100, 200];
|
|
12
13
|
return ((0, jsx_runtime_1.jsx)(material_1.TablePagination, { sx: {
|
|
13
14
|
"& .MuiInputBase-root": {
|
|
14
15
|
height: "30px",
|
|
@@ -25,6 +26,6 @@ const Pagination = ({ count, page, onPageChange, rowsPerPage, onRowsPerPageChang
|
|
|
25
26
|
fontSize: "14px",
|
|
26
27
|
padding: isMobile ? "2px 10px" : "4px 8px",
|
|
27
28
|
},
|
|
28
|
-
}, component: "div", count: count, page: page, onPageChange: onPageChange, rowsPerPage: rowsPerPage, onRowsPerPageChange: onRowsPerPageChange, labelRowsPerPage: !isMobile ? "Rows per page" : "", ...rest }));
|
|
29
|
+
}, component: "div", count: count, page: page, onPageChange: onPageChange, rowsPerPage: rowsPerPage, onRowsPerPageChange: onRowsPerPageChange, rowsPerPageOptions: rowsPerPageOptions, defaultValue: 100, labelRowsPerPage: !isMobile ? "Rows per page" : "", ...rest }));
|
|
29
30
|
};
|
|
30
31
|
exports.Pagination = Pagination;
|
package/packages/shared-components/dist/SmartGrid/Components/EditableFields/SmartSelectField.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { SelectHTMLAttributes } from "react";
|
|
2
|
+
import type { Option } from "../../../FormFields";
|
|
3
|
+
export declare const SmartSelectField: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
|
|
4
|
+
errorMessage?: string;
|
|
5
|
+
options: Option[];
|
|
6
|
+
} & SelectHTMLAttributes<HTMLSelectElement> & import("react").RefAttributes<HTMLSelectElement>>>;
|
|
7
|
+
//# sourceMappingURL=SmartSelectField.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SmartSelectField.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/EditableFields/SmartSelectField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAgGlD,eAAO,MAAM,gBAAgB;mBA5FZ,MAAM;aACZ,MAAM,EAAE;gGAsGlB,CAAC"}
|
package/packages/shared-components/dist/SmartGrid/Components/EditableFields/SmartSelectField.js
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.SmartSelectField = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const material_1 = require("@mui/material");
|
|
6
|
+
const react_1 = require("react");
|
|
7
|
+
const SmartTooltip_1 = require("./SmartTooltip");
|
|
8
|
+
const SmartSelectFieldComponent = (0, react_1.forwardRef)(({ errorMessage, options, ...rest }, ref) => {
|
|
9
|
+
const theme = (0, material_1.useTheme)();
|
|
10
|
+
const { butterflyBlue, lipstickRed, iron } = theme.palette.app.color;
|
|
11
|
+
const [isFocused, setIsFocused] = (0, react_1.useState)(false);
|
|
12
|
+
const getBorderColor = () => {
|
|
13
|
+
if (errorMessage && !isFocused) {
|
|
14
|
+
return lipstickRed[900];
|
|
15
|
+
}
|
|
16
|
+
if (isFocused) {
|
|
17
|
+
return butterflyBlue[900];
|
|
18
|
+
}
|
|
19
|
+
return iron[800];
|
|
20
|
+
};
|
|
21
|
+
return ((0, jsx_runtime_1.jsx)(SmartTooltip_1.SmartTooltip, { title: errorMessage ?? "", position: "top", delay: 50, children: (0, jsx_runtime_1.jsx)("div", { style: {
|
|
22
|
+
display: "flex",
|
|
23
|
+
flexDirection: "column",
|
|
24
|
+
gap: "4px",
|
|
25
|
+
width: "100%",
|
|
26
|
+
}, children: (0, jsx_runtime_1.jsx)("div", { style: {
|
|
27
|
+
display: "flex",
|
|
28
|
+
alignItems: "center",
|
|
29
|
+
border: `2px solid ${getBorderColor()}`,
|
|
30
|
+
borderRadius: "4px",
|
|
31
|
+
padding: "4px 8px",
|
|
32
|
+
background: "white",
|
|
33
|
+
minHeight: "20px",
|
|
34
|
+
}, children: (0, jsx_runtime_1.jsx)("select", { ref: ref, ...rest, style: {
|
|
35
|
+
width: "100%",
|
|
36
|
+
border: "none",
|
|
37
|
+
background: "transparent",
|
|
38
|
+
padding: "0",
|
|
39
|
+
fontSize: "14px",
|
|
40
|
+
outline: "none",
|
|
41
|
+
cursor: "pointer",
|
|
42
|
+
}, onClick: (e) => e.stopPropagation(), onFocus: (e) => {
|
|
43
|
+
e.stopPropagation();
|
|
44
|
+
setIsFocused(true);
|
|
45
|
+
}, onBlur: (e) => {
|
|
46
|
+
e.stopPropagation();
|
|
47
|
+
setIsFocused(false);
|
|
48
|
+
}, children: options.length === 0 ? ((0, jsx_runtime_1.jsx)("option", { value: "", disabled: true, children: "No Options" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Select Option" }), options.map((option) => ((0, jsx_runtime_1.jsx)("option", { value: String(option.value), children: option.label }, option.value)))] })) }) }) }) }));
|
|
49
|
+
});
|
|
50
|
+
SmartSelectFieldComponent.displayName = "SmartSelectFieldComponent";
|
|
51
|
+
exports.SmartSelectField = (0, react_1.memo)(SmartSelectFieldComponent, (prevProps, nextProps) => {
|
|
52
|
+
return (prevProps.name === nextProps.name &&
|
|
53
|
+
prevProps.value === nextProps.value &&
|
|
54
|
+
prevProps.disabled === nextProps.disabled &&
|
|
55
|
+
prevProps.options === nextProps.options &&
|
|
56
|
+
prevProps.errorMessage === nextProps.errorMessage);
|
|
57
|
+
});
|
|
58
|
+
exports.SmartSelectField.displayName = "SmartSelectField";
|
package/packages/shared-components/dist/SmartGrid/Components/EditableFields/SmartTextField.d.ts
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { InputHTMLAttributes } from "react";
|
|
2
|
+
export declare const SmartTextField: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
|
|
3
|
+
errorMessage?: string;
|
|
4
|
+
} & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>>;
|
|
5
|
+
//# sourceMappingURL=SmartTextField.d.ts.map
|
package/packages/shared-components/dist/SmartGrid/Components/EditableFields/SmartTextField.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SmartTextField.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/EditableFields/SmartTextField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAiFjD,eAAO,MAAM,cAAc;mBA5EV,MAAM;6FAwFtB,CAAC"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.SmartTextField = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const material_1 = require("@mui/material");
|
|
6
|
+
const react_1 = require("react");
|
|
7
|
+
const SmartTooltip_1 = require("./SmartTooltip");
|
|
8
|
+
const SmartTextFieldComponent = (0, react_1.forwardRef)(({ errorMessage, ...rest }, ref) => {
|
|
9
|
+
const theme = (0, material_1.useTheme)();
|
|
10
|
+
const { butterflyBlue, lipstickRed, iron } = theme.palette.app.color;
|
|
11
|
+
const [isFocused, setIsFocused] = (0, react_1.useState)(false);
|
|
12
|
+
const getBorderColor = () => {
|
|
13
|
+
if (errorMessage && !isFocused) {
|
|
14
|
+
return lipstickRed[900];
|
|
15
|
+
}
|
|
16
|
+
if (isFocused) {
|
|
17
|
+
return butterflyBlue[900];
|
|
18
|
+
}
|
|
19
|
+
return iron[800];
|
|
20
|
+
};
|
|
21
|
+
return ((0, jsx_runtime_1.jsx)(SmartTooltip_1.SmartTooltip, { title: errorMessage ?? "", position: "top", delay: 50, children: (0, jsx_runtime_1.jsx)("div", { style: {
|
|
22
|
+
display: "flex",
|
|
23
|
+
flexDirection: "column",
|
|
24
|
+
gap: "4px",
|
|
25
|
+
width: "100%",
|
|
26
|
+
}, children: (0, jsx_runtime_1.jsx)("div", { style: {
|
|
27
|
+
display: "flex",
|
|
28
|
+
alignItems: "center",
|
|
29
|
+
border: `2px solid ${getBorderColor()}`,
|
|
30
|
+
borderRadius: "4px",
|
|
31
|
+
padding: "4px 8px",
|
|
32
|
+
background: "white",
|
|
33
|
+
minHeight: "20px",
|
|
34
|
+
}, children: (0, jsx_runtime_1.jsx)("input", { ref: ref, ...rest, style: {
|
|
35
|
+
width: "100%",
|
|
36
|
+
border: "none",
|
|
37
|
+
background: "transparent",
|
|
38
|
+
padding: "0",
|
|
39
|
+
fontSize: "14px",
|
|
40
|
+
outline: "none",
|
|
41
|
+
}, onClick: (e) => e.stopPropagation(), onFocus: (e) => {
|
|
42
|
+
e.stopPropagation();
|
|
43
|
+
setIsFocused(true);
|
|
44
|
+
}, onBlur: (e) => {
|
|
45
|
+
e.stopPropagation();
|
|
46
|
+
setIsFocused(false);
|
|
47
|
+
} }) }) }) }));
|
|
48
|
+
});
|
|
49
|
+
SmartTextFieldComponent.displayName = "SmartTextFieldComponent";
|
|
50
|
+
// Memoize with custom comparison to prevent unnecessary re-renders
|
|
51
|
+
exports.SmartTextField = (0, react_1.memo)(SmartTextFieldComponent, (prevProps, nextProps) => {
|
|
52
|
+
// Only re-render if these specific props change
|
|
53
|
+
return (prevProps.name === nextProps.name &&
|
|
54
|
+
prevProps.value === nextProps.value &&
|
|
55
|
+
prevProps.disabled === nextProps.disabled &&
|
|
56
|
+
prevProps.type === nextProps.type &&
|
|
57
|
+
prevProps.errorMessage === nextProps.errorMessage);
|
|
58
|
+
});
|
|
59
|
+
exports.SmartTextField.displayName = "SmartTextField";
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
type SmartTooltipProps = {
|
|
2
|
+
children: React.ReactNode;
|
|
3
|
+
title: string;
|
|
4
|
+
position?: "top" | "bottom" | "left" | "right";
|
|
5
|
+
delay?: number;
|
|
6
|
+
};
|
|
7
|
+
export declare const SmartTooltip: ({ children, title, position, delay, }: SmartTooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=SmartTooltip.d.ts.map
|
package/packages/shared-components/dist/SmartGrid/Components/EditableFields/SmartTooltip.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SmartTooltip.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/EditableFields/SmartTooltip.tsx"],"names":[],"mappings":"AAKA,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAsGF,eAAO,MAAM,YAAY,GAAI,uCAK1B,iBAAiB,4CAsDnB,CAAC"}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.SmartTooltip = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const material_1 = require("@mui/material");
|
|
6
|
+
const react_1 = require("react");
|
|
7
|
+
const react_dom_1 = require("react-dom");
|
|
8
|
+
// Renders tooltip floating OUTSIDE AG GRID cell
|
|
9
|
+
const TooltipBox = ({ wrapper, title, position }) => {
|
|
10
|
+
const theme = (0, material_1.useTheme)();
|
|
11
|
+
const { iron } = theme.palette.app.color;
|
|
12
|
+
const rect = wrapper.getBoundingClientRect();
|
|
13
|
+
const baseStyles = {
|
|
14
|
+
position: "absolute",
|
|
15
|
+
zIndex: 999999,
|
|
16
|
+
background: iron[200],
|
|
17
|
+
color: iron[600],
|
|
18
|
+
padding: "4px 8px",
|
|
19
|
+
borderRadius: 4,
|
|
20
|
+
fontSize: 12,
|
|
21
|
+
pointerEvents: "none",
|
|
22
|
+
whiteSpace: "nowrap",
|
|
23
|
+
transition: "opacity 0.2s ease, transform 0.2s ease",
|
|
24
|
+
opacity: 1,
|
|
25
|
+
};
|
|
26
|
+
const arrowSize = 6;
|
|
27
|
+
const arrowStyles = {
|
|
28
|
+
position: "absolute",
|
|
29
|
+
width: 0,
|
|
30
|
+
height: 0,
|
|
31
|
+
borderStyle: "solid",
|
|
32
|
+
};
|
|
33
|
+
switch (position) {
|
|
34
|
+
case "top":
|
|
35
|
+
baseStyles.top = rect.top - 28;
|
|
36
|
+
baseStyles.left = rect.left + rect.width / 2;
|
|
37
|
+
baseStyles.transform = "translateX(-50%)";
|
|
38
|
+
Object.assign(arrowStyles, {
|
|
39
|
+
borderWidth: `${arrowSize}px ${arrowSize}px 0 ${arrowSize}px`,
|
|
40
|
+
borderColor: `${iron[200]} transparent transparent transparent`,
|
|
41
|
+
bottom: -arrowSize,
|
|
42
|
+
left: "50%",
|
|
43
|
+
transform: "translateX(-50%)",
|
|
44
|
+
});
|
|
45
|
+
break;
|
|
46
|
+
case "bottom":
|
|
47
|
+
baseStyles.top = rect.bottom + 4;
|
|
48
|
+
baseStyles.left = rect.left + rect.width / 2;
|
|
49
|
+
baseStyles.transform = "translateX(-50%)";
|
|
50
|
+
Object.assign(arrowStyles, {
|
|
51
|
+
borderWidth: `0 ${arrowSize}px ${arrowSize}px ${arrowSize}px`,
|
|
52
|
+
borderColor: `transparent transparent ${iron[200]} transparent`,
|
|
53
|
+
top: -arrowSize,
|
|
54
|
+
left: "50%",
|
|
55
|
+
transform: "translateX(-50%)",
|
|
56
|
+
});
|
|
57
|
+
break;
|
|
58
|
+
case "left":
|
|
59
|
+
baseStyles.top = rect.top + rect.height / 2;
|
|
60
|
+
baseStyles.left = rect.left - 8;
|
|
61
|
+
baseStyles.transform = "translateY(-50%)";
|
|
62
|
+
Object.assign(arrowStyles, {
|
|
63
|
+
borderWidth: `${arrowSize}px 0 ${arrowSize}px ${arrowSize}px`,
|
|
64
|
+
borderColor: `transparent transparent transparent ${iron[200]}`,
|
|
65
|
+
right: -arrowSize,
|
|
66
|
+
top: "50%",
|
|
67
|
+
transform: "translateY(-50%)",
|
|
68
|
+
});
|
|
69
|
+
break;
|
|
70
|
+
case "right":
|
|
71
|
+
baseStyles.top = rect.top + rect.height / 2;
|
|
72
|
+
baseStyles.left = rect.right + 8;
|
|
73
|
+
baseStyles.transform = "translateY(-50%)";
|
|
74
|
+
Object.assign(arrowStyles, {
|
|
75
|
+
borderWidth: `${arrowSize}px ${arrowSize}px ${arrowSize}px 0`,
|
|
76
|
+
borderColor: `transparent ${iron[200]} transparent transparent`,
|
|
77
|
+
left: -arrowSize,
|
|
78
|
+
top: "50%",
|
|
79
|
+
transform: "translateY(-50%)",
|
|
80
|
+
});
|
|
81
|
+
break;
|
|
82
|
+
}
|
|
83
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: baseStyles, children: [title, (0, jsx_runtime_1.jsx)("div", { style: arrowStyles })] }));
|
|
84
|
+
};
|
|
85
|
+
const SmartTooltip = ({ children, title, position = "top", delay = 50, }) => {
|
|
86
|
+
const [visible, setVisible] = (0, react_1.useState)(false);
|
|
87
|
+
const wrapperRef = (0, react_1.useRef)(null);
|
|
88
|
+
const timeoutRef = (0, react_1.useRef)(null);
|
|
89
|
+
const handleMouseEnter = () => {
|
|
90
|
+
if (timeoutRef.current) {
|
|
91
|
+
clearTimeout(timeoutRef.current);
|
|
92
|
+
}
|
|
93
|
+
timeoutRef.current = setTimeout(() => setVisible(true), delay);
|
|
94
|
+
};
|
|
95
|
+
const handleMouseLeave = () => {
|
|
96
|
+
if (timeoutRef.current) {
|
|
97
|
+
clearTimeout(timeoutRef.current);
|
|
98
|
+
}
|
|
99
|
+
setVisible(false);
|
|
100
|
+
};
|
|
101
|
+
(0, react_1.useEffect)(() => {
|
|
102
|
+
return () => {
|
|
103
|
+
if (timeoutRef.current) {
|
|
104
|
+
clearTimeout(timeoutRef.current);
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
}, []);
|
|
108
|
+
const tooltipContent = visible && title && wrapperRef.current
|
|
109
|
+
? (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(TooltipBox, { wrapper: wrapperRef.current, title: title, position: position }), document.body)
|
|
110
|
+
: null;
|
|
111
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: wrapperRef, style: { display: "inline-block", width: "100%" }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: children }), tooltipContent] }));
|
|
112
|
+
};
|
|
113
|
+
exports.SmartTooltip = SmartTooltip;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/EditableFields/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./SmartTextField"), exports);
|
|
18
|
+
__exportStar(require("./SmartSelectField"), exports);
|
|
19
|
+
__exportStar(require("./SmartTooltip"), exports);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/SmartGrid/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./EditableFields"), exports);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SmartGrid/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,0BAA0B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SmartGrid/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,0BAA0B,CAAC;AACzC,cAAc,cAAc,CAAC"}
|
|
@@ -17,3 +17,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
__exportStar(require("./SmartGrid"), exports);
|
|
18
18
|
__exportStar(require("./types/index"), exports);
|
|
19
19
|
__exportStar(require("./hooks/useExportToExcel"), exports);
|
|
20
|
+
__exportStar(require("./Components"), exports);
|
|
@@ -1 +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;;uBA8GtB,gBAAgB,GAAG,IAAI;;;oBAf1D,CAAC,SAAS,WAAW,uBACb,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,YACnB,MAAM,IAAI,gBACN,OAAO;
|
|
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;;uBA8GtB,gBAAgB,GAAG,IAAI;;;oBAf1D,CAAC,SAAS,WAAW,uBACb,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,YACnB,MAAM,IAAI,gBACN,OAAO;EAgD1B"}
|
|
@@ -86,7 +86,9 @@ function useFormFieldFocus(isOpen) {
|
|
|
86
86
|
const setInputRef = (0, react_1.useCallback)((ref) => {
|
|
87
87
|
if (ref) {
|
|
88
88
|
const wasInputFocused = document.activeElement === ref ||
|
|
89
|
-
ref
|
|
89
|
+
(ref instanceof HTMLElement &&
|
|
90
|
+
document.activeElement instanceof Node &&
|
|
91
|
+
ref.contains(document.activeElement)) ||
|
|
90
92
|
wasFocusedRef.current;
|
|
91
93
|
if (wasInputFocused && !wasFocusedRef.current) {
|
|
92
94
|
wasFocusedRef.current = true;
|
|
@@ -12,7 +12,7 @@ exports.colorPalette = {
|
|
|
12
12
|
300: "hsla(0, 0%, 0%, 0.35)",
|
|
13
13
|
50: "hsla(0, 0%, 0%, 0.02)",
|
|
14
14
|
100: "hsla(0, 0%, 0%, 0.50)",
|
|
15
|
-
200: "hsla(0, 0%,
|
|
15
|
+
200: "hsla(0, 0.00%, 38.00%, 0.95)",
|
|
16
16
|
A100: "hsla(0, 0%, 0%, 0)",
|
|
17
17
|
A200: "hsla(0, 0%, 0%, 0)",
|
|
18
18
|
A400: "hsla(0, 0%, 0%, 0)",
|