add | null to resolve some improved react type hints

This commit is contained in:
Michael Peters 2024-12-18 15:02:59 -08:00
parent 6c265c4c06
commit da29115c33
4 changed files with 39 additions and 51 deletions

70
package-lock.json generated
View File

@ -10,14 +10,14 @@
"license": "ISC",
"dependencies": {
"jotai": "^2.10.4",
"react": "^18.3.1",
"react-dom": "^18.3.1"
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@eslint/js": "^9.17.0",
"@types/eslint__js": "^8.42.3",
"@types/react": "^18.3.17",
"@types/react-dom": "^18.3.5",
"@types/react": "^19.0.2",
"@types/react-dom": "^19.0.2",
"css-loader": "^7.1.2",
"eslint": "^8.57.1",
"eslint-plugin-react": "^7.37.2",
@ -28,7 +28,7 @@
"prettier": "^3.4.2",
"prettier-plugin-organize-imports": "^4.1.0",
"sass": "^1.83.0",
"sass-loader": "^14.2.1",
"sass-loader": "^16.0.4",
"style-loader": "^4.0.0",
"ts-loader": "^9.5.1",
"typescript": "^5.7.2",
@ -750,12 +750,6 @@
"@types/node": "*"
}
},
"node_modules/@types/prop-types": {
"version": "15.7.14",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
"integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
"devOptional": true
},
"node_modules/@types/qs": {
"version": "6.9.17",
"resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.17.tgz",
@ -769,22 +763,21 @@
"dev": true
},
"node_modules/@types/react": {
"version": "18.3.17",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.17.tgz",
"integrity": "sha512-opAQ5no6LqJNo9TqnxBKsgnkIYHozW9KSTlFVoSUJYh1Fl/sswkEoqIugRSm7tbh6pABtYjGAjW+GOS23j8qbw==",
"version": "19.0.2",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.2.tgz",
"integrity": "sha512-USU8ZI/xyKJwFTpjSVIrSeHBVAGagkHQKPNbxeWwql/vDmnTIBgx+TJnhFnj1NXgz8XfprU0egV2dROLGpsBEg==",
"devOptional": true,
"dependencies": {
"@types/prop-types": "*",
"csstype": "^3.0.2"
}
},
"node_modules/@types/react-dom": {
"version": "18.3.5",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.5.tgz",
"integrity": "sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==",
"version": "19.0.2",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.2.tgz",
"integrity": "sha512-c1s+7TKFaDRRxr1TxccIX2u7sfCnc3RxkVyBIUA2lCpyqCF+QoAwQ/CBg7bsMdVwP120HEH143VQezKtef5nCg==",
"dev": true,
"peerDependencies": {
"@types/react": "^18.0.0"
"@types/react": "^19.0.0"
}
},
"node_modules/@types/retry": {
@ -4476,7 +4469,8 @@
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
"dev": true
},
"node_modules/js-yaml": {
"version": "4.1.0",
@ -4636,6 +4630,7 @@
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"dev": true,
"dependencies": {
"js-tokens": "^3.0.0 || ^4.0.0"
},
@ -5576,26 +5571,22 @@
}
},
"node_modules/react": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
"dependencies": {
"loose-envify": "^1.1.0"
},
"version": "19.0.0",
"resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
"integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/react-dom": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
"integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
"version": "19.0.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
"integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
"dependencies": {
"loose-envify": "^1.1.0",
"scheduler": "^0.23.2"
"scheduler": "^0.25.0"
},
"peerDependencies": {
"react": "^18.3.1"
"react": "^19.0.0"
}
},
"node_modules/react-is": {
@ -5937,9 +5928,9 @@
}
},
"node_modules/sass-loader": {
"version": "14.2.1",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-14.2.1.tgz",
"integrity": "sha512-G0VcnMYU18a4N7VoNDegg2OuMjYtxnqzQWARVWCIVSZwJeiL9kg8QMsuIZOplsJgTzZLF6jGxI3AClj8I9nRdQ==",
"version": "16.0.4",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.4.tgz",
"integrity": "sha512-LavLbgbBGUt3wCiYzhuLLu65+fWXaXLmq7YxivLhEqmiupCFZ5sKUAipK3do6V80YSU0jvSxNhEdT13IXNr3rg==",
"dev": true,
"dependencies": {
"neo-async": "^2.6.2"
@ -5977,12 +5968,9 @@
}
},
"node_modules/scheduler": {
"version": "0.23.2",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
"integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
"dependencies": {
"loose-envify": "^1.1.0"
}
"version": "0.25.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
"integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA=="
},
"node_modules/schema-utils": {
"version": "3.3.0",

View File

@ -12,8 +12,8 @@
"devDependencies": {
"@eslint/js": "^9.17.0",
"@types/eslint__js": "^8.42.3",
"@types/react": "^18.3.17",
"@types/react-dom": "^18.3.5",
"@types/react": "^19.0.2",
"@types/react-dom": "^19.0.2",
"css-loader": "^7.1.2",
"eslint": "^8.57.1",
"eslint-plugin-react": "^7.37.2",
@ -24,7 +24,7 @@
"prettier": "^3.4.2",
"prettier-plugin-organize-imports": "^4.1.0",
"sass": "^1.83.0",
"sass-loader": "^14.2.1",
"sass-loader": "^16.0.4",
"style-loader": "^4.0.0",
"ts-loader": "^9.5.1",
"typescript": "^5.7.2",
@ -35,7 +35,7 @@
},
"dependencies": {
"jotai": "^2.10.4",
"react": "^18.3.1",
"react-dom": "^18.3.1"
"react": "^19.0.0",
"react-dom": "^19.0.0"
}
}

View File

@ -6,19 +6,19 @@ import { useAlignment } from './hooks';
/** calls the close action when you hit escape or click outside of the ref element */
export function useActionWhenEscapeOrClickedOrContextOutsideEffect(
refs: RefObject<HTMLElement>[],
refs: RefObject<HTMLElement | null>[],
actionFunc: () => void,
) {
// have to use a ref here and not states since we can't re-assign state between mouseup and click
const data = useRef<
Map<number, { ref: RefObject<HTMLElement>; mouseDownTarget: Node | null; mouseUpTarget: Node | null }>
Map<number, { ref: RefObject<HTMLElement | null>; mouseDownTarget: Node | null; mouseUpTarget: Node | null }>
>(new Map());
const [hadMouseDown, setHadMouseDown] = useState<boolean>(false);
useEffect(() => {
data.current.clear();
for (let i = 0; i < refs.length; ++i) {
const ref = refs[i] as RefObject<HTMLElement>;
const ref = refs[i] as RefObject<HTMLElement | null>;
data.current.set(i, { ref, mouseDownTarget: null, mouseUpTarget: null });
}
}, [refs]);
@ -125,7 +125,7 @@ export function useActionWhenEscapeOrClickedOrContextOutsideEffect(
}
export interface ContextProps {
rootRef?: RefObject<HTMLDivElement>;
rootRef?: RefObject<HTMLDivElement | null>;
relativeToRef?: RefObject<HTMLElement>;
relativeToPos?: { x: number; y: number };
alignment: IAlignment;

View File

@ -173,7 +173,7 @@ export function useAsyncSubmitText<ErrorType>(
/** aligns an element to a reference element or position every time realignDeps changes */
export function useAlignment(
rootRef: RefObject<HTMLElement>,
rootRef: RefObject<HTMLElement | null>,
relativeToRef: RefObject<HTMLElement | null> | null,
relativeToPos: { x: number; y: number } | null,
alignment: IAlignment,