@geotab/zenith 3.5.0-beta.0 → 3.5.0
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.
|
@@ -5,7 +5,7 @@ import { IZenComponentProps } from "../commonHelpers/zenComponent";
|
|
|
5
5
|
import { TAlignment as TAlignmentAbsolute } from "../absolute/absolute";
|
|
6
6
|
/**
|
|
7
7
|
* @deprecated - please use {@link TAlignmentAbsolute|TAlignment} interface from the absolute component
|
|
8
|
-
|
|
8
|
+
*/
|
|
9
9
|
export type TAlignment = "top" | "top-left" | "top-right" | "left" | "left-top" | "left-bottom" | "right" | "right-top" | "right-bottom" | "bottom" | "bottom-left" | "bottom-right";
|
|
10
10
|
export interface IControlledPopup extends IZenComponentProps {
|
|
11
11
|
triggerRef: RefObject<HTMLElement | null>;
|
|
@@ -9,7 +9,11 @@ const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className
|
|
|
9
9
|
const autoId = (0, react_1.useId)();
|
|
10
10
|
const popupId = id || autoId;
|
|
11
11
|
(0, react_1.useEffect)(() => {
|
|
12
|
-
if (!triggerRef.current
|
|
12
|
+
if (!triggerRef.current) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
triggerRef.current.setAttribute("data-popup-id", popupId);
|
|
16
|
+
if (preventAttributesAutoSet) {
|
|
13
17
|
return;
|
|
14
18
|
}
|
|
15
19
|
const refTriggerRole = triggerRef.current.getAttribute("role");
|
|
@@ -17,8 +21,7 @@ const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className
|
|
|
17
21
|
triggerRef.current.setAttribute("aria-haspopup", triggerRole ? triggerRole : refTriggerRole === "menuitem" ? "menu" : "true");
|
|
18
22
|
triggerRef.current.setAttribute("aria-expanded", isOpen ? "true" : "false");
|
|
19
23
|
triggerRef.current.setAttribute("aria-controls", popupId);
|
|
20
|
-
triggerRef.current.setAttribute("data-popup-id", popupId);
|
|
21
24
|
}, [triggerRef, isOpen, popupId, preventAttributesAutoSet]);
|
|
22
|
-
return (0, jsx_runtime_1.jsx)(absolute_1.Absolute, { triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: (0, classNames_1.classNames)(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll, role: "dialog", ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, recalculateOnScroll: recalculateOnScroll, children: children });
|
|
25
|
+
return ((0, jsx_runtime_1.jsx)(absolute_1.Absolute, { triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: (0, classNames_1.classNames)(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll, role: "dialog", ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, recalculateOnScroll: recalculateOnScroll, children: children }));
|
|
23
26
|
};
|
|
24
27
|
exports.ControlledPopup = ControlledPopup;
|
|
@@ -5,7 +5,7 @@ import { IZenComponentProps } from "../commonHelpers/zenComponent";
|
|
|
5
5
|
import { TAlignment as TAlignmentAbsolute } from "../absolute/absolute";
|
|
6
6
|
/**
|
|
7
7
|
* @deprecated - please use {@link TAlignmentAbsolute|TAlignment} interface from the absolute component
|
|
8
|
-
|
|
8
|
+
*/
|
|
9
9
|
export type TAlignment = "top" | "top-left" | "top-right" | "left" | "left-top" | "left-bottom" | "right" | "right-top" | "right-bottom" | "bottom" | "bottom-left" | "bottom-right";
|
|
10
10
|
export interface IControlledPopup extends IZenComponentProps {
|
|
11
11
|
triggerRef: RefObject<HTMLElement | null>;
|
|
@@ -6,7 +6,11 @@ export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, cl
|
|
|
6
6
|
const autoId = useId();
|
|
7
7
|
const popupId = id || autoId;
|
|
8
8
|
useEffect(() => {
|
|
9
|
-
if (!triggerRef.current
|
|
9
|
+
if (!triggerRef.current) {
|
|
10
|
+
return;
|
|
11
|
+
}
|
|
12
|
+
triggerRef.current.setAttribute("data-popup-id", popupId);
|
|
13
|
+
if (preventAttributesAutoSet) {
|
|
10
14
|
return;
|
|
11
15
|
}
|
|
12
16
|
const refTriggerRole = triggerRef.current.getAttribute("role");
|
|
@@ -14,7 +18,6 @@ export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, cl
|
|
|
14
18
|
triggerRef.current.setAttribute("aria-haspopup", triggerRole ? triggerRole : refTriggerRole === "menuitem" ? "menu" : "true");
|
|
15
19
|
triggerRef.current.setAttribute("aria-expanded", isOpen ? "true" : "false");
|
|
16
20
|
triggerRef.current.setAttribute("aria-controls", popupId);
|
|
17
|
-
triggerRef.current.setAttribute("data-popup-id", popupId);
|
|
18
21
|
}, [triggerRef, isOpen, popupId, preventAttributesAutoSet]);
|
|
19
|
-
return _jsx(Absolute, { triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: classNames(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll, role: "dialog", ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, recalculateOnScroll: recalculateOnScroll, children: children });
|
|
22
|
+
return (_jsx(Absolute, { triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: classNames(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll, role: "dialog", ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, recalculateOnScroll: recalculateOnScroll, children: children }));
|
|
20
23
|
};
|
package/package.json
CHANGED
|
@@ -1,118 +1,118 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
],
|
|
14
|
-
"scripts": {
|
|
15
|
-
"test": "npm run clean && npm run test-build && node build-utils/translations/inject-translations.js && jest --clearCache && jest",
|
|
16
|
-
"start": "npm run storybook --loglevel verbose",
|
|
17
|
-
"lint": "npx eslint",
|
|
18
|
-
"prettier-fix": "npx prettier --write \"**/*.{ts,tsx,js,jsx,json,md,less,css}\"",
|
|
19
|
-
"prettier": "npx prettier --check \"**/*.{ts,tsx,js,jsx,json,md,less,css}\"",
|
|
20
|
-
"new": "node newComponent.mjs",
|
|
21
|
-
"translations": "node build-utils/translations/translation-integrity.mjs",
|
|
22
|
-
"build-ai-mdx": "node collectmdx.js",
|
|
23
|
-
"build-esm": "npx tsc -b tsconfig.esm.json",
|
|
24
|
-
"build-cjs": "npx tsc -b tsconfig.cjs.json",
|
|
25
|
-
"build-ts": "npm run build-esm && npm run build-cjs && node build-utils/translations/inject-translations.js && node less-transformer.js",
|
|
26
|
-
"build-less": "node less-compile.js",
|
|
27
|
-
"build-copy": "node build-copy.js",
|
|
28
|
-
"build-clean": "node build-clean.js",
|
|
29
|
-
"build-index": "node buildIndex.js",
|
|
30
|
-
"update-version": "node updateVersion.js",
|
|
31
|
-
"build": "npm run build-index && npm run update-version && npm run build-ts && npm run build-less && npm run build-copy && npm run build-clean && npm run translations",
|
|
32
|
-
"add-icon": "node addIcon.js",
|
|
33
|
-
"watch": "npx tsc -b tsconfig.build.json -w",
|
|
34
|
-
"watch:inject": "npx nodemon --watch dist --ext js --exec 'node build-utils/translations/inject-translations.js' --delay 500ms",
|
|
35
|
-
"test-build": "npx tsc -b tsconfig.jestTests.json",
|
|
36
|
-
"test-watch": "npm run clean && npm run test-build && node build-utils/translations/inject-translations.js && npx tsc -b tsconfig.jestTests.json -w",
|
|
37
|
-
"test-watch:inject": "npx nodemon --watch dist --ext js --exec 'node build-utils/translations/inject-translations.js' --delay 500ms",
|
|
38
|
-
"test-coverage": "npm run clean && npm run test-build && node build-utils/translations/inject-translations.js && jest --clearCache && jest --collectCoverage=true --coverage --collectCoverageFrom='./dist/**/*.js' --collectCoverageFrom='!./dist/**/*.test.js' --json --outputFile=jest-result.json --coverageReporters=html --coverageReporters=text-summary --coverageReporters=cobertura --maxWorkers=4 --noStackTrace && node testHelpers/cobertura/cobertura.js",
|
|
39
|
-
"coverage": "npm run test-coverage && google-chrome ./jest-coverage/index.html",
|
|
40
|
-
"storybook": "storybook dev -p 6006",
|
|
41
|
-
"build-storybook": "storybook build && npm run build-ai-mdx",
|
|
42
|
-
"clean": "rm -rf ./dist && rm -rf ./esm && rm -rf ./jest-coverage"
|
|
43
|
-
},
|
|
44
|
-
"author": "",
|
|
45
|
-
"license": "SEE LICENSE IN LICENSE.txt",
|
|
46
|
-
"devDependencies": {
|
|
47
|
-
"@babel/core": "^7.28.5",
|
|
48
|
-
"@babel/generator": "^7.28.5",
|
|
49
|
-
"@babel/parser": "^7.28.5",
|
|
50
|
-
"@babel/preset-env": "^7.24.3",
|
|
51
|
-
"@babel/preset-react": "^7.24.1",
|
|
52
|
-
"@babel/preset-typescript": "^7.24.1",
|
|
53
|
-
"@babel/traverse": "^7.28.5",
|
|
54
|
-
"@eslint/js": "^9.18.0",
|
|
55
|
-
"@storybook/addon-docs": "^10.1.11",
|
|
56
|
-
"@storybook/addon-links": "^10.1.11",
|
|
57
|
-
"@storybook/addon-webpack5-compiler-babel": "^4.0.0",
|
|
58
|
-
"@storybook/react-webpack5": "^10.1.11",
|
|
59
|
-
"@tanstack/react-query": "^5.85.5",
|
|
60
|
-
"@testing-library/react": "^16.3.0",
|
|
61
|
-
"@types/jest": "^29.5.12",
|
|
62
|
-
"@types/react": "^19.2.2",
|
|
63
|
-
"@types/react-dom": "^19.2.2",
|
|
64
|
-
"@typescript-eslint/eslint-plugin": "^8.20.0",
|
|
65
|
-
"@typescript-eslint/parser": "^8.20.0",
|
|
66
|
-
"axe-core": "^4.10.2",
|
|
67
|
-
"css-loader": "^7.1.2",
|
|
68
|
-
"eslint": "^9.18.0",
|
|
69
|
-
"eslint-config-prettier": "^10.1.8",
|
|
70
|
-
"eslint-plugin-react": "^7.37.3",
|
|
71
|
-
"eslint-plugin-react-hooks": "^7.0.1",
|
|
72
|
-
"eslint-plugin-storybook": "^10.2.0",
|
|
73
|
-
"globals": "^17.1.0",
|
|
74
|
-
"jest": "^30.2.0",
|
|
75
|
-
"jest-environment-jsdom": "^30.2.0",
|
|
76
|
-
"jest-junit": "^16.0.0",
|
|
77
|
-
"less": "^4.1.3",
|
|
78
|
-
"less-loader": "^12.2.0",
|
|
79
|
-
"mini-css-extract-plugin": "^2.9.2",
|
|
80
|
-
"prettier": "^3.8.1",
|
|
81
|
-
"storybook": "^10.1.11",
|
|
82
|
-
"style-loader": "^4.0.0",
|
|
83
|
-
"typescript": "^5.4.3",
|
|
84
|
-
"typescript-eslint": "^8.20.0",
|
|
85
|
-
"webpack": "^5.96.1",
|
|
86
|
-
"xml2js": "^0.6.0"
|
|
87
|
-
},
|
|
88
|
-
"dependencies": {
|
|
89
|
-
"chart.js": "^4.4.6",
|
|
90
|
-
"react": "^19.2.0",
|
|
91
|
-
"react-dom": "^19.2.0",
|
|
92
|
-
"react-hook-form": "^7.60.0"
|
|
93
|
-
},
|
|
94
|
-
"peerDependencies": {
|
|
95
|
-
"chart.js": "^4.4.6",
|
|
96
|
-
"react": "^19.2.0",
|
|
97
|
-
"react-dom": "^19.2.0"
|
|
98
|
-
},
|
|
99
|
-
"files": [
|
|
100
|
-
"./dist/",
|
|
101
|
-
"./esm"
|
|
102
|
-
],
|
|
103
|
-
"browserslist": {
|
|
104
|
-
"production": [
|
|
105
|
-
">0.2%",
|
|
106
|
-
"not dead",
|
|
107
|
-
"not op_mini all"
|
|
2
|
+
"name": "@geotab/zenith",
|
|
3
|
+
"version": "3.5.0",
|
|
4
|
+
"description": "Zenith components library on React",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"types": "esm/index.d.ts",
|
|
7
|
+
"module": "esm/index.js",
|
|
8
|
+
"sideEffects": [
|
|
9
|
+
"**/*.css",
|
|
10
|
+
"**/*.less",
|
|
11
|
+
"**/react-chartjs/dateAdapter.ts",
|
|
12
|
+
"**/react-chartjs/dateAdapter.js"
|
|
108
13
|
],
|
|
109
|
-
"
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
14
|
+
"scripts": {
|
|
15
|
+
"test": "npm run clean && npm run test-build && node build-utils/translations/inject-translations.js && jest --clearCache && jest",
|
|
16
|
+
"start": "npm run storybook --loglevel verbose",
|
|
17
|
+
"lint": "npx eslint",
|
|
18
|
+
"prettier-fix": "npx prettier --write \"**/*.{ts,tsx,js,jsx,json,md,less,css}\"",
|
|
19
|
+
"prettier": "npx prettier --check \"**/*.{ts,tsx,js,jsx,json,md,less,css}\"",
|
|
20
|
+
"new": "node newComponent.mjs",
|
|
21
|
+
"translations": "node build-utils/translations/translation-integrity.mjs",
|
|
22
|
+
"build-ai-mdx": "node collectmdx.js",
|
|
23
|
+
"build-esm": "npx tsc -b tsconfig.esm.json",
|
|
24
|
+
"build-cjs": "npx tsc -b tsconfig.cjs.json",
|
|
25
|
+
"build-ts": "npm run build-esm && npm run build-cjs && node build-utils/translations/inject-translations.js && node less-transformer.js",
|
|
26
|
+
"build-less": "node less-compile.js",
|
|
27
|
+
"build-copy": "node build-copy.js",
|
|
28
|
+
"build-clean": "node build-clean.js",
|
|
29
|
+
"build-index": "node buildIndex.js",
|
|
30
|
+
"update-version": "node updateVersion.js",
|
|
31
|
+
"build": "npm run build-index && npm run update-version && npm run build-ts && npm run build-less && npm run build-copy && npm run build-clean && npm run translations",
|
|
32
|
+
"add-icon": "node addIcon.js",
|
|
33
|
+
"watch": "npx tsc -b tsconfig.build.json -w",
|
|
34
|
+
"watch:inject": "npx nodemon --watch dist --ext js --exec 'node build-utils/translations/inject-translations.js' --delay 500ms",
|
|
35
|
+
"test-build": "npx tsc -b tsconfig.jestTests.json",
|
|
36
|
+
"test-watch": "npm run clean && npm run test-build && node build-utils/translations/inject-translations.js && npx tsc -b tsconfig.jestTests.json -w",
|
|
37
|
+
"test-watch:inject": "npx nodemon --watch dist --ext js --exec 'node build-utils/translations/inject-translations.js' --delay 500ms",
|
|
38
|
+
"test-coverage": "npm run clean && npm run test-build && node build-utils/translations/inject-translations.js && jest --clearCache && jest --collectCoverage=true --coverage --collectCoverageFrom='./dist/**/*.js' --collectCoverageFrom='!./dist/**/*.test.js' --json --outputFile=jest-result.json --coverageReporters=html --coverageReporters=text-summary --coverageReporters=cobertura --maxWorkers=4 --noStackTrace && node testHelpers/cobertura/cobertura.js",
|
|
39
|
+
"coverage": "npm run test-coverage && google-chrome ./jest-coverage/index.html",
|
|
40
|
+
"storybook": "storybook dev -p 6006",
|
|
41
|
+
"build-storybook": "storybook build && npm run build-ai-mdx",
|
|
42
|
+
"clean": "rm -rf ./dist && rm -rf ./esm && rm -rf ./jest-coverage"
|
|
43
|
+
},
|
|
44
|
+
"author": "",
|
|
45
|
+
"license": "SEE LICENSE IN LICENSE.txt",
|
|
46
|
+
"devDependencies": {
|
|
47
|
+
"@babel/core": "^7.28.5",
|
|
48
|
+
"@babel/generator": "^7.28.5",
|
|
49
|
+
"@babel/parser": "^7.28.5",
|
|
50
|
+
"@babel/preset-env": "^7.24.3",
|
|
51
|
+
"@babel/preset-react": "^7.24.1",
|
|
52
|
+
"@babel/preset-typescript": "^7.24.1",
|
|
53
|
+
"@babel/traverse": "^7.28.5",
|
|
54
|
+
"@eslint/js": "^9.18.0",
|
|
55
|
+
"@storybook/addon-docs": "^10.1.11",
|
|
56
|
+
"@storybook/addon-links": "^10.1.11",
|
|
57
|
+
"@storybook/addon-webpack5-compiler-babel": "^4.0.0",
|
|
58
|
+
"@storybook/react-webpack5": "^10.1.11",
|
|
59
|
+
"@tanstack/react-query": "^5.85.5",
|
|
60
|
+
"@testing-library/react": "^16.3.0",
|
|
61
|
+
"@types/jest": "^29.5.12",
|
|
62
|
+
"@types/react": "^19.2.2",
|
|
63
|
+
"@types/react-dom": "^19.2.2",
|
|
64
|
+
"@typescript-eslint/eslint-plugin": "^8.20.0",
|
|
65
|
+
"@typescript-eslint/parser": "^8.20.0",
|
|
66
|
+
"axe-core": "^4.10.2",
|
|
67
|
+
"css-loader": "^7.1.2",
|
|
68
|
+
"eslint": "^9.18.0",
|
|
69
|
+
"eslint-config-prettier": "^10.1.8",
|
|
70
|
+
"eslint-plugin-react": "^7.37.3",
|
|
71
|
+
"eslint-plugin-react-hooks": "^7.0.1",
|
|
72
|
+
"eslint-plugin-storybook": "^10.2.0",
|
|
73
|
+
"globals": "^17.1.0",
|
|
74
|
+
"jest": "^30.2.0",
|
|
75
|
+
"jest-environment-jsdom": "^30.2.0",
|
|
76
|
+
"jest-junit": "^16.0.0",
|
|
77
|
+
"less": "^4.1.3",
|
|
78
|
+
"less-loader": "^12.2.0",
|
|
79
|
+
"mini-css-extract-plugin": "^2.9.2",
|
|
80
|
+
"prettier": "^3.8.1",
|
|
81
|
+
"storybook": "^10.1.11",
|
|
82
|
+
"style-loader": "^4.0.0",
|
|
83
|
+
"typescript": "^5.4.3",
|
|
84
|
+
"typescript-eslint": "^8.20.0",
|
|
85
|
+
"webpack": "^5.96.1",
|
|
86
|
+
"xml2js": "^0.6.0"
|
|
87
|
+
},
|
|
88
|
+
"dependencies": {
|
|
89
|
+
"chart.js": "^4.4.6",
|
|
90
|
+
"react": "^19.2.0",
|
|
91
|
+
"react-dom": "^19.2.0",
|
|
92
|
+
"react-hook-form": "^7.60.0"
|
|
93
|
+
},
|
|
94
|
+
"peerDependencies": {
|
|
95
|
+
"chart.js": "^4.4.6",
|
|
96
|
+
"react": "^19.2.0",
|
|
97
|
+
"react-dom": "^19.2.0"
|
|
98
|
+
},
|
|
99
|
+
"files": [
|
|
100
|
+
"./dist/",
|
|
101
|
+
"./esm"
|
|
102
|
+
],
|
|
103
|
+
"browserslist": {
|
|
104
|
+
"production": [
|
|
105
|
+
">0.2%",
|
|
106
|
+
"not dead",
|
|
107
|
+
"not op_mini all"
|
|
108
|
+
],
|
|
109
|
+
"development": [
|
|
110
|
+
"last 1 chrome version",
|
|
111
|
+
"last 1 firefox version",
|
|
112
|
+
"last 1 safari version"
|
|
113
|
+
]
|
|
114
|
+
},
|
|
115
|
+
"publishConfig": {
|
|
116
|
+
"access": "public"
|
|
117
|
+
}
|
|
118
118
|
}
|