rix(plugin-dates): update React Calendar

pmndrs · Jan 22, 2025 · 5bbbf85 · 5bbbf85
1 parent 8890bb8
commit 5bbbf85
Show file tree

Hide file tree

Showing 11 changed files with 106 additions and 95 deletions.
diff --git a/packages/leva/src/components/Image/Image.tsx b/packages/leva/src/components/Image/Image.tsx
@@ -11,14 +11,14 @@ export function ImageComponent() {
   const { popinRef, wrapperRef, shown, show, hide } = usePopin()
 
   const onDrop = useCallback(
-    (acceptedFiles) => {
+    <T extends File>(acceptedFiles: T[]) => {
       if (acceptedFiles.length) onUpdate(acceptedFiles[0])
     },
     [onUpdate]
   )
 
   const clear = useCallback(
-    (e) => {
+    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
       e.stopPropagation()
       onUpdate(undefined)
     },

diff --git a/packages/leva/src/context.tsx b/packages/leva/src/context.tsx
@@ -32,5 +32,6 @@ type LevaStoreProviderProps = {
 }
 
 export function LevaStoreProvider({ children, store }: LevaStoreProviderProps) {
+  // @ts-expect-error portal JSX types are broken upstream
   return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
 }
diff --git a/packages/leva/src/hooks/useDeepMemo.ts b/packages/leva/src/hooks/useDeepMemo.ts
@@ -2,6 +2,7 @@ import { useMemo } from 'react'
 import { useCompareMemoize } from './useCompareMemoize'
 
 export function useDeepMemo<T>(fn: () => T, deps: React.DependencyList | undefined) {
+  // NOTE: useMemo implementation allows undefined, but types do not
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  return useMemo(fn, useCompareMemoize(deps, true))
+  return useMemo(fn, useCompareMemoize(deps, true)!)
 }
diff --git a/packages/leva/src/hooks/useInput.ts b/packages/leva/src/hooks/useInput.ts
@@ -30,9 +30,9 @@ export function useInput(path: string): [
   const store = useStoreContext()
   const [state, setState] = useState<Input | null>(getInputAtPath(store.getData(), path))
 
-  const set = useCallback((value) => store.setValueAtPath(path, value, true), [path, store])
-  const setSettings = useCallback((settings) => store.setSettingsAtPath(path, settings), [path, store])
-  const disable = useCallback((flag) => store.disableInputAtPath(path, flag), [path, store])
+  const set = useCallback((value: any) => store.setValueAtPath(path, value, true), [path, store])
+  const setSettings = useCallback((settings: any) => store.setSettingsAtPath(path, settings), [path, store])
+  const disable = useCallback((flag: boolean) => store.disableInputAtPath(path, flag), [path, store])
   const emitOnEditStart = useCallback(() => store.emitOnEditStart(path), [path, store])
   const emitOnEditEnd = useCallback(() => store.emitOnEditEnd(path), [path, store])
 

diff --git a/packages/leva/src/hooks/useInputSetters.ts b/packages/leva/src/hooks/useInputSetters.ts
@@ -15,7 +15,7 @@ export function useInputSetters<V, Settings extends object>({ value, type, setti
   const previousValueRef = useRef(value)
   const settingsRef = useRef(settings)
   settingsRef.current = settings
-  const setFormat = useCallback((v) => setDisplayValue(format(type, v, settingsRef.current)), [type])
+  const setFormat = useCallback((v: V) => setDisplayValue(format(type, v, settingsRef.current)), [type])
 
   const onUpdate = useCallback(
     (updatedValue: any) => {

diff --git a/packages/leva/src/hooks/useShallowMemo.ts b/packages/leva/src/hooks/useShallowMemo.ts
@@ -2,6 +2,7 @@ import { useMemo } from 'react'
 import { useCompareMemoize } from './useCompareMemoize'
 
 export function useShallowMemo<T>(fn: () => T, deps: React.DependencyList | undefined) {
+  // NOTE: useMemo implementation allows undefined, but types do not
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  return useMemo(fn, useCompareMemoize(deps, false))
+  return useMemo(fn, useCompareMemoize(deps, false)!)
 }
diff --git a/packages/plugin-bezier/src/bezier-utils.ts b/packages/plugin-bezier/src/bezier-utils.ts
@@ -1,11 +1,11 @@
 import { useCallback } from 'react'
 
 export const useRange = () => {
-  return useCallback((v: number, size) => size * v, [])
+  return useCallback((v: number, size: number) => size * v, [])
 }
 
 export const useInvertedRange = () => {
-  return useCallback((v: number, size) => v / size, [])
+  return useCallback((v: number, size: number) => v / size, [])
 }
 
 /**

diff --git a/packages/plugin-dates/package.json b/packages/plugin-dates/package.json
@@ -18,9 +18,9 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "react-datepicker": "^4.8.0"
+    "react-datepicker": "^7.6.0"
   },
   "devDependencies": {
-    "@types/react-datepicker": "4.4.2"
+    "@types/react-datepicker": "^7.0.0"
   }
 }
diff --git a/packages/plugin-dates/src/Date.tsx b/packages/plugin-dates/src/Date.tsx
@@ -10,6 +10,7 @@ const { Label, Row } = Components
 const DateCalendarContainer = ({ children }: DateCalendarContainerProps) => {
   return (
     <CalendarContainer>
+      {/* @ts-expect-error portal JSX types are broken upstream */}
       <StyledWrapper>{children}</StyledWrapper>
     </CalendarContainer>
   )

diff --git a/packages/plugin-dates/src/date-types.ts b/packages/plugin-dates/src/date-types.ts
@@ -1,11 +1,12 @@
 import type { LevaInputProps } from 'leva/plugin'
 import { ChangeEventHandler, MouseEventHandler } from 'react'
-import { CalendarContainerProps } from 'react-datepicker'
+import { CalendarContainer } from 'react-datepicker'
 
 export type DateSettings = { locale: string; inputFormat: string }
 export type DateInput = { date: Date } & Partial<DateSettings>
 
-export type DateCalendarContainerProps = CalendarContainerProps
+// TODO: export this upstream
+export type DateCalendarContainerProps = React.ComponentProps<typeof CalendarContainer>
 export type DateInputProps = { value: string; onClick: MouseEventHandler; onChange: ChangeEventHandler }
 
 export type InternalDate = { date: Date; formattedDate: string }

diff --git a/yarn.lock b/yarn.lock
@@ -2104,6 +2104,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.6.0":
+  version: 1.6.9
+  resolution: "@floating-ui/core@npm:1.6.9"
+  dependencies:
+    "@floating-ui/utils": ^0.2.9
+  checksum: 21cbcac72a40172399570dedf0eb96e4f24b0d829980160e8d14edf08c2955ac6feffb7b94e1530c78fb7944635e52669c9257ad08570e0295efead3b5a9af91
+  languageName: node
+  linkType: hard
+
 "@floating-ui/dom@npm:^0.5.3":
   version: 0.5.4
   resolution: "@floating-ui/dom@npm:0.5.4"
@@ -2113,6 +2122,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/dom@npm:^1.0.0":
+  version: 1.6.13
+  resolution: "@floating-ui/dom@npm:1.6.13"
+  dependencies:
+    "@floating-ui/core": ^1.6.0
+    "@floating-ui/utils": ^0.2.9
+  checksum: eabab9d860d3b5beab1c2d6936287efc4d9ab352de99062380589ef62870d59e8730397489c34a96657e128498001b5672330c4a9da0159fe8b2401ac59fe314
+  languageName: node
+  linkType: hard
+
 "@floating-ui/react-dom@npm:0.7.2":
   version: 0.7.2
   resolution: "@floating-ui/react-dom@npm:0.7.2"
@@ -2126,6 +2145,39 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/react-dom@npm:^2.1.2":
+  version: 2.1.2
+  resolution: "@floating-ui/react-dom@npm:2.1.2"
+  dependencies:
+    "@floating-ui/dom": ^1.0.0
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 25bb031686e23062ed4222a8946e76b3f9021d40a48437bd747233c4964a766204b8a55f34fa8b259839af96e60db7c6e3714d81f1de06914294f90e86ffbc48
+  languageName: node
+  linkType: hard
+
+"@floating-ui/react@npm:^0.27.0":
+  version: 0.27.3
+  resolution: "@floating-ui/react@npm:0.27.3"
+  dependencies:
+    "@floating-ui/react-dom": ^2.1.2
+    "@floating-ui/utils": ^0.2.9
+    tabbable: ^6.0.0
+  peerDependencies:
+    react: ">=17.0.0"
+    react-dom: ">=17.0.0"
+  checksum: 34a6283df3ae232546903dcdb69a5d2d13706a7ceb7b3779bb3b9b1ef042ad7241fe5d3899fd7c6713a0e890b86b56285f89a45de4344828877085a262f29713
+  languageName: node
+  linkType: hard
+
+"@floating-ui/utils@npm:^0.2.9":
+  version: 0.2.9
+  resolution: "@floating-ui/utils@npm:0.2.9"
+  checksum: d518b80cec5a323e54a069a1dd99a20f8221a4853ed98ac16c75275a0cc22f75de4f8ac5b121b4f8990bd45da7ad1fb015b9a1e4bac27bb1cd62444af84e9784
+  languageName: node
+  linkType: hard
+
 "@gar/promisify@npm:^1.0.1, @gar/promisify@npm:^1.1.3":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -2360,8 +2412,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@leva-ui/plugin-dates@workspace:packages/plugin-dates"
   dependencies:
-    "@types/react-datepicker": 4.4.2
-    react-datepicker: ^4.8.0
+    "@types/react-datepicker": ^7.0.0
+    react-datepicker: ^7.6.0
   peerDependencies:
     "@use-gesture/react": ^10.0.0
     leva: ">=0.10.0"
@@ -2647,13 +2699,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@popperjs/core@npm:^2.9.2":
-  version: 2.11.6
-  resolution: "@popperjs/core@npm:2.11.6"
-  checksum: 47fb328cec1924559d759b48235c78574f2d71a8a6c4c03edb6de5d7074078371633b91e39bbf3f901b32aa8af9b9d8f82834856d2f5737a23475036b16817f0
-  languageName: node
-  linkType: hard
-
 "@preconstruct/cli@npm:^2.1.5":
   version: 2.2.2
   resolution: "@preconstruct/cli@npm:2.2.2"
@@ -4919,15 +4964,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-datepicker@npm:4.4.2":
-  version: 4.4.2
-  resolution: "@types/react-datepicker@npm:4.4.2"
+"@types/react-datepicker@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "@types/react-datepicker@npm:7.0.0"
   dependencies:
-    "@popperjs/core": ^2.9.2
-    "@types/react": "*"
-    date-fns: ^2.0.1
-    react-popper: ^2.2.5
-  checksum: 6816335cfcdb587dc5ef7b40abbbf242d31f8dfb443467eb4b5899fdcab059a3e49dd7d6cec4d8469953667dd041237f4b08e3a4a79440efb9280f0c53402667
+    react-datepicker: "*"
+  checksum: b73d822abb0410bf9046e14844304f31e2d680c44a510dd757ef4be4861aa0a8943863ef7c427f361f42a630c982ba39fb1882b9532506a5c89d47fe099a2df1
   languageName: node
   linkType: hard
 
@@ -7692,13 +7734,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:^2.2.6":
-  version: 2.3.2
-  resolution: "classnames@npm:2.3.2"
-  checksum: 2c62199789618d95545c872787137262e741f9db13328e216b093eea91c85ef2bfb152c1f9e63027204e2559a006a92eb74147d46c800a9f96297ae1d9f96f4e
-  languageName: node
-  linkType: hard
-
 "clean-css@npm:^4.2.3":
   version: 4.2.4
   resolution: "clean-css@npm:4.2.4"
@@ -7830,6 +7865,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "clsx@npm:2.1.1"
+  checksum: acd3e1ab9d8a433ecb3cc2f6a05ab95fe50b4a3cfc5ba47abb6cbf3754585fcb87b84e90c822a1f256c4198e3b41c7f6c391577ffc8678ad587fc0976b24fd57
+  languageName: node
+  linkType: hard
+
 "code-point-at@npm:^1.0.0":
   version: 1.1.0
   resolution: "code-point-at@npm:1.1.0"
@@ -8524,10 +8566,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"date-fns@npm:^2.0.1, date-fns@npm:^2.24.0":
-  version: 2.29.3
-  resolution: "date-fns@npm:2.29.3"
-  checksum: e01cf5b62af04e05dfff921bb9c9933310ed0e1ae9a81eb8653452e64dc841acf7f6e01e1a5ae5644d0337e9a7f936175fd2cb6819dc122fdd9c5e86c56be484
+"date-fns@npm:^3.6.0":
+  version: 3.6.0
+  resolution: "date-fns@npm:3.6.0"
+  checksum: 0daa1e9a436cf99f9f2ae9232b55e11f3dd46132bee10987164f3eebd29f245b2e066d7d7db40782627411ecf18551d8f4c9fcdf2226e48bb66545407d448ab7
   languageName: node
   linkType: hard
 
@@ -13588,7 +13630,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
+"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
   dependencies:
@@ -16284,20 +16326,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-datepicker@npm:^4.8.0":
-  version: 4.8.0
-  resolution: "react-datepicker@npm:4.8.0"
+"react-datepicker@npm:*, react-datepicker@npm:^7.6.0":
+  version: 7.6.0
+  resolution: "react-datepicker@npm:7.6.0"
   dependencies:
-    "@popperjs/core": ^2.9.2
-    classnames: ^2.2.6
-    date-fns: ^2.24.0
-    prop-types: ^15.7.2
-    react-onclickoutside: ^6.12.0
-    react-popper: ^2.2.5
+    "@floating-ui/react": ^0.27.0
+    clsx: ^2.1.1
+    date-fns: ^3.6.0
   peerDependencies:
-    react: ^16.9.0 || ^17 || ^18
-    react-dom: ^16.9.0 || ^17 || ^18
-  checksum: d31a1002c5c6220fd8a5201f3a71015ac09b003d71f59ebc6fc0f9c452268f924f0244e69c223f64763ebb2131031ce5e792872631bfb364c34b8ea730258e6c
+    react: ^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc
+    react-dom: ^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc
+  checksum: 45ff4616812ca90401c121b0196fdd481ca55c28d21535fd74f06ee21bbe0edeaa2632dc85d82a58e870559281862a1840164a429f771b8456348c6ce315b4a4
   languageName: node
   linkType: hard
 
@@ -16369,13 +16408,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-fast-compare@npm:^3.0.1":
-  version: 3.2.0
-  resolution: "react-fast-compare@npm:3.2.0"
-  checksum: 8ef272c825ae329f61633ce4ce7f15aa5b84e5214d88bc0823880236e03e985a13195befa2c7a4eda7db3b017dc7985729152d88445823f652403cf36c2b86aa
-  languageName: node
-  linkType: hard
-
 "react-inspector@npm:^5.1.0":
   version: 5.1.1
   resolution: "react-inspector@npm:5.1.1"
@@ -16410,30 +16442,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-onclickoutside@npm:^6.12.0":
-  version: 6.12.2
-  resolution: "react-onclickoutside@npm:6.12.2"
-  peerDependencies:
-    react: ^15.5.x || ^16.x || ^17.x || ^18.x
-    react-dom: ^15.5.x || ^16.x || ^17.x || ^18.x
-  checksum: a0c7f4fbcf84e00d50b3fc18208e5fdc4e97b17daf910f176659e079038a560d2e299955804d20e6ca2bf375404d03fdb865dc7f5f85cab3e60b493be4375e77
-  languageName: node
-  linkType: hard
-
-"react-popper@npm:^2.2.5":
-  version: 2.3.0
-  resolution: "react-popper@npm:2.3.0"
-  dependencies:
-    react-fast-compare: ^3.0.1
-    warning: ^4.0.2
-  peerDependencies:
-    "@popperjs/core": ^2.0.0
-    react: ^16.8.0 || ^17 || ^18
-    react-dom: ^16.8.0 || ^17 || ^18
-  checksum: 837111c98738011c69b3069a464ea5bdcbf487105b6148e8faf90cb7337e134edb1b98b8824322941c378756cca30a15c18c25f558e53b85ed5762fa0dc8e6b2
-  languageName: node
-  linkType: hard
-
 "react-reconciler@npm:^0.26.2":
   version: 0.26.2
   resolution: "react-reconciler@npm:0.26.2"
@@ -18441,6 +18449,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tabbable@npm:^6.0.0":
+  version: 6.2.0
+  resolution: "tabbable@npm:6.2.0"
+  checksum: f8440277d223949272c74bb627a3371be21735ca9ad34c2570f7e1752bd646ccfc23a9d8b1ee65d6561243f4134f5fbbf1ad6b39ac3c4b586554accaff4a1300
+  languageName: node
+  linkType: hard
+
 "tapable@npm:^1.0.0, tapable@npm:^1.1.3":
   version: 1.1.3
   resolution: "tapable@npm:1.1.3"
@@ -19812,15 +19827,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"warning@npm:^4.0.2":
-  version: 4.0.3
-  resolution: "warning@npm:4.0.3"
-  dependencies:
-    loose-envify: ^1.0.0
-  checksum: 4f2cb6a9575e4faf71ddad9ad1ae7a00d0a75d24521c193fa464f30e6b04027bd97aa5d9546b0e13d3a150ab402eda216d59c1d0f2d6ca60124d96cd40dfa35c
-  languageName: node
-  linkType: hard
-
 "watchpack-chokidar2@npm:^2.0.1":
   version: 2.0.1
   resolution: "watchpack-chokidar2@npm:2.0.1"