@graphcommerce/next-ui 9.0.0-canary.99 → 9.0.1-canary.0

package/Navigation/components/NavigationProvider.tsx

@@ -1,21 +1,23 @@
-import { MotionConfig, useMotionValue, useTransform } from 'framer-motion'
+import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import { MotionConfig, useMotionValue } from 'framer-motion'
 import React, { useMemo } from 'react'
 import { isElement } from 'react-is'
 import { LazyHydrate } from '../../LazyHydrate'
 import { nonNullable } from '../../RenderType/nonNullable'
-import {
-  NavigationNode,
+import type {
   NavigationContextType,
-  NavigationContext,
-  UseNavigationSelection,
-  NavigationNodeType,
+  NavigationNode,
   NavigationNodeComponent,
+  UseNavigationSelection,
 } from '../hooks/useNavigation'
-import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import { NavigationContext, NavigationNodeType } from '../hooks/useNavigation'
 
 export type NavigationProviderBaseProps = {
   items: (NavigationNode | React.ReactElement)[]
   hideRootOnNavigate?: boolean
+  /**
+   * @deprecated No longer used
+   */
   closeAfterNavigate?: boolean
   children?: React.ReactNode
   animationDuration?: number
@@ -29,7 +31,6 @@ const NavigationProviderBase = React.memo<NavigationProviderBaseProps>((props) =
   const {
     items,
     hideRootOnNavigate = true,
-    closeAfterNavigate = false,
     animationDuration = 0.225,
     children,
     selection,

package/Navigation/components/NavigationTitle.tsx

@@ -1,11 +1,11 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
 import { Trans } from '@lingui/react'
-import {
-  NavigationPath,
-  NavigationNodeHref,
+import type {
   NavigationNodeButton,
-  useNavigation,
+  NavigationNodeHref,
+  NavigationPath,
 } from '../hooks/useNavigation'
+import { useNavigation } from '../hooks/useNavigation'
 
 function findCurrent(
   items,
@@ -32,7 +32,7 @@ function findCurrent(
   return result
 }
 
-export const NavigationTitle = () => {
+export function NavigationTitle() {
   const { selection, items } = useNavigation()
   return (
     <>{useMotionValueValue(selection, (v) => findCurrent(items, v))?.name ?? <Trans id='Menu' />}</>

package/Navigation/hooks/useNavigation.ts

@@ -1,5 +1,7 @@
-import { MotionValue, useMotionValue } from 'framer-motion'
-import React, { createContext, useContext } from 'react'
+import type { MotionValue } from 'framer-motion'
+import { useMotionValue } from 'framer-motion'
+import type React from 'react'
+import { createContext, useContext } from 'react'
 
 export type NavigationId = string | number
 export type NavigationPath = NavigationId[]

package/Overlay/components/Overlay.tsx

@@ -3,12 +3,13 @@ import { Portal } from '@mui/material'
 import { AnimatePresence, usePresence } from 'framer-motion'
 import type { SetOptional } from 'type-fest'
 import { variantsToScrollSnapType } from '../utils/variantsToScrollSnapType'
-import { OverlayBase, LayoutOverlayBaseProps } from './OverlayBase'
+import type { LayoutOverlayBaseProps } from './OverlayBase'
+import { OverlayBase } from './OverlayBase'
 import { OverlayContainer } from './OverlayContainer'
 
 export type OverlayTmpProps = Omit<
   SetOptional<LayoutOverlayBaseProps, 'variantSm' | 'variantMd'>,
-  'direction' | 'offsetPageY' | 'isPresent' | 'safeToRemove'
+  'offsetPageY' | 'isPresent' | 'safeToRemove'
 >
 
 function OverlayUsePresence(props: OverlayTmpProps) {

package/Overlay/components/OverlayBase.tsx

@@ -1,4 +1,4 @@
-import { Direction } from '@graphcommerce/framer-next-pages'
+import type { Direction } from '@graphcommerce/framer-next-pages'
 import { Scroller, useScrollerContext, useScrollTo } from '@graphcommerce/framer-scroller'
 import {
   dvh,
@@ -7,10 +7,11 @@ import {
   useElementScroll,
   useIsomorphicLayoutEffect,
 } from '@graphcommerce/framer-utils'
-import { Box, styled, SxProps, Theme, useTheme, useThemeProps } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, styled, useTheme, useThemeProps } from '@mui/material'
+import type { MotionProps } from 'framer-motion'
 import {
   m,
-  MotionProps,
   motionValue,
   useDomEvent,
   useMotionValue,
@@ -18,11 +19,13 @@ import {
   useTransform,
 } from 'framer-motion'
 import React, { useCallback, useEffect, useRef } from 'react'
-import { LayoutProvider } from '../../Layout/components/LayoutProvider'
-import { ExtendableComponent, extendableComponent } from '../../Styles'
 import { useMatchMedia } from '../../hooks/useMatchMedia'
+import { LayoutProvider } from '../../Layout/components/LayoutProvider'
+import type { ExtendableComponent } from '../../Styles'
+import { extendableComponent } from '../../Styles'
+import { useContainerSizing } from '../../Theme'
 
-export type LayoutOverlayVariant = 'left' | 'bottom' | 'right'
+export type LayoutOverlayVariant = 'left' | 'bottom' | 'right' | 'top'
 export type LayoutOverlaySize = 'floating' | 'minimal' | 'full'
 export type LayoutOverlayAlign = 'start' | 'end' | 'center' | 'stretch'
 
@@ -60,6 +63,9 @@ export type LayoutOverlayBaseProps = {
 
   /* For `variantMd='left|right' */
   widthMd?: string | false
+
+  disableAnimation?: boolean
+  disableDrag?: boolean
 } & StyleProps &
   OverridableProps
 
@@ -69,7 +75,7 @@ enum OverlayPosition {
   CLOSED = 0,
 }
 
-const name = 'LayoutOverlayBase' as const
+const name = 'LayoutOverlayBase'
 const parts = [
   'scroller',
   'backdrop',
@@ -114,6 +120,8 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     disableInert,
     widthMd = 'max(800px, 50vw)',
     widthSm = 'max(300px, 80vw)',
+    disableAnimation = false,
+    disableDrag = false,
   } = props
 
   const th = useTheme()
@@ -136,10 +144,15 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
   const overlayPaneScroll = useElementScroll(overlayPaneRef)
 
   const classes = withState({ variantSm, variantMd, sizeSm, sizeMd, justifySm, justifyMd })
+  const containerSizing = useContainerSizing('shell')
 
   const match = useMatchMedia()
   const positions = useConstant(() => ({
-    open: { x: motionValue(0), y: motionValue(0), visible: motionValue(direction === 0 ? 1 : 0) },
+    open: {
+      x: motionValue(0),
+      y: motionValue(0),
+      visible: motionValue(direction === 0 || disableDrag ? 1 : 0),
+    },
     closed: { x: motionValue(0), y: motionValue(0) },
   }))
 
@@ -161,6 +174,9 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     if (variant() === 'right') {
       return { open: [x.length - 1, 0], closed: [0, 0] }
     }
+    if (variant() === 'top') {
+      return { open: [0, y.length - 2], closed: [0, y.length - 1] }
+    }
     return { open: [0, y.length - 1], closed: [0, 0] }
   }, [getScrollSnapPositions, variant])
 
@@ -176,6 +192,10 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
         positions.closed.x.set(x[x.length - 1])
         positions.open.x.set(x[x.length - 2])
       }
+      if (variant() === 'top') {
+        positions.closed.y.set(y[y.length - 1])
+        positions.open.y.set(y[y.length - 2])
+      }
       if (variant() === 'right') {
         positions.open.x.set(x[x.length - 1])
         positions.closed.x.set(0)
@@ -197,8 +217,8 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
         scroll.y.set(positions.closed.y.get())
       } else {
         disableSnap()
-        scroller.scrollLeft = scroll.x.getPrevious()
-        scroller.scrollTop = scroll.y.getPrevious()
+        scroller.scrollLeft = scroll.x.getPrevious() ?? 0
+        scroller.scrollTop = scroll.y.getPrevious() ?? 0
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
         scrollTo(openClosePositions().open, { stopAnimationOnScroll: false })
       }
@@ -212,6 +232,10 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
         const closedX = positions.closed.x.get()
         vis = closedX === 0 ? 0 : clampRound((scroll.x.get() - closedX) / -closedX)
       }
+      if (variant() === 'top') {
+        const closedY = positions.closed.y.get()
+        vis = closedY === 0 ? 0 : clampRound((scroll.y.get() - closedY) / -closedY)
+      }
       if (variant() === 'right') {
         const openedX = positions.open.x.get()
         vis = openedX === 0 ? 0 : clampRound(scroll.x.get() / openedX)
@@ -283,7 +307,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
 
     if (variant() === 'right') document.body.style.overflow = 'hidden'
 
-    if (direction === 0) {
+    if (direction === 0 || disableAnimation) {
       disableSnap()
       scroller.scrollTop = positions.open.y.get()
       scroller.scrollLeft = positions.open.x.get()
@@ -299,6 +323,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     }
   }, [
     direction,
+    disableAnimation,
     disableSnap,
     enableSnap,
     isPresent,
@@ -319,12 +344,15 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     const scroller = scrollerRef.current
     if (isPresent || !scroller) return
 
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    scrollTo(openClosePositions().closed, { stopAnimationOnScroll: false }).then(() => {
+    const doAfter = () => {
       safeToRemove?.()
       document.body.style.overflow = ''
-    })
-  }, [isPresent, openClosePositions, position, positions, safeToRemove, scrollTo, scrollerRef])
+    }
+
+    if (disableAnimation) doAfter()
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    else scrollTo(openClosePositions().closed, { stopAnimationOnScroll: false }).then(doAfter)
+  }, [disableAnimation, isPresent, openClosePositions, safeToRemove, scrollTo, scrollerRef])
 
   // Only go back to a previous page if the overlay isn't closed.
   const closeOverlay = useCallback(() => {
@@ -416,6 +444,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
         className={`${classes.scroller} ${className ?? ''}`}
         grid={false}
         onClick={onClickAway}
+        disableDrag={disableDrag}
         hideScrollbar
         sx={[
           (theme) => ({
@@ -435,22 +464,22 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
                 overscrollBehaviorX: 'none',
               },
               '&.variantSmLeft': {
-                gridTemplate: `"overlay beforeOverlay"`,
+                gridTemplate: '"overlay beforeOverlay"',
                 borderTopRightRadius: theme.shape.borderRadius * 3,
                 borderBottomRightRadius: theme.shape.borderRadius * 3,
               },
               '&.variantSmRight': {
-                gridTemplate: `"beforeOverlay overlay"`,
+                gridTemplate: '"beforeOverlay overlay"',
                 borderTopLeftRadius: theme.shape.borderRadius * 3,
                 borderBottomLeftRadius: theme.shape.borderRadius * 3,
               },
               '&.variantSmBottom': {
                 overscrollBehaviorY: 'none',
-                gridTemplate: `"beforeOverlay" "overlay"`,
+                gridTemplate: '"beforeOverlay" "overlay"',
                 height: `calc(${dvh(100)} - 1px)`,
 
                 '&::after': {
-                  content: `""`,
+                  content: '""',
                   display: 'block',
                   position: 'absolute',
                   width: '100%',
@@ -463,20 +492,22 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
             },
             [theme.breakpoints.up('md')]: {
               '&.variantMdLeft': {
-                gridTemplate: `"overlay beforeOverlay"`,
+                gridTemplate: '"overlay beforeOverlay"',
                 borderTopRightRadius: theme.shape.borderRadius * 4,
                 borderBottomRightRadius: theme.shape.borderRadius * 4,
               },
               '&.variantMdRight': {
-                gridTemplate: `"beforeOverlay overlay"`,
+                gridTemplate: '"beforeOverlay overlay"',
                 borderTopLeftRadius: theme.shape.borderRadius * 4,
                 borderBottomLeftRadius: theme.shape.borderRadius * 4,
               },
               '&.variantMdBottom': {
-                [theme.breakpoints.up('md')]: {
-                  gridTemplate: `"beforeOverlay" "overlay"`,
-                  height: dvh(100),
-                },
+                gridTemplate: '"beforeOverlay" "overlay"',
+                height: dvh(100),
+              },
+              '&.variantMdTop': {
+                gridTemplate: '"overlay" "beforeOverlay"',
+                height: dvh(100),
               },
             },
           }),
@@ -504,7 +535,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
               '&.variantMdLeft, &.variantMdRight': {
                 width: dvw(100),
               },
-              '&.variantMdBottom': {
+              '&.variantMdBottom, &.variantMdTop': {
                 height: dvh(100),
               },
             },
@@ -521,7 +552,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
             '&.variantMdBottom, &.variantMdRight': {
               scrollSnapAlign: 'end',
             },
-            '&.variantMdLeft': {
+            '&.variantMdTop, &.variantMdLeft': {
               scrollSnapAlign: 'start',
             },
             [theme.breakpoints.down('md')]: {
@@ -535,7 +566,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
               justifyContent: justifyMd,
               alignItems: justifyMd,
 
-              '&.variantMdBottom': {
+              '&.variantMdBottom, &.variantMdTop': {
                 display: 'grid',
               },
               '&.sizeMdFloating': {
@@ -543,6 +574,8 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
               },
               '&.sizeMdFloating.variantMdBottom': {
                 marginTop: `calc(${theme.page.vertical} * -1)`,
+                maxWidth: containerSizing.value ?? 'unset',
+                mx: 'auto',
               },
             },
           })}
@@ -582,6 +615,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
                   borderTopLeftRadius: `${theme.shape.borderRadius * 3}px`,
                   borderTopRightRadius: `${theme.shape.borderRadius * 3}px`,
                 },
+
                 '&.variantSmLeft, &.variantSmRight': {
                   overscrollBehaviorY: 'none',
                   width: widthSm || 'max-content',
@@ -603,11 +637,14 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
                 overflowY: 'auto',
                 overflowX: 'hidden',
                 overscrollBehavior: 'contain',
+                '&.variantMdTop.sizeMdFloating:not(.justifyMdStretch)': {
+                  width: widthMd,
+                },
                 '&.variantMdBottom.sizeMdFloating:not(.justifyMdStretch)': {
                   width: widthMd,
                 },
 
-                '&.variantMdBottom': {
+                '&.variantMdBottom, &.variantMdTop': {
                   maxHeight: `calc(${dvh(100)} - ${mdSpacingTop})`,
                   paddingTop: mdSpacingTop,
                   boxSizing: 'border-box',
@@ -670,9 +707,13 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
                     borderTopLeftRadius: theme.shape.borderRadius * 4,
                     borderTopRightRadius: theme.shape.borderRadius * 4,
                   },
+                  '&.variantMdTop': {
+                    borderBottomLeftRadius: theme.shape.borderRadius * 4,
+                    borderBottomRightRadius: theme.shape.borderRadius * 4,
+                  },
                   '&.sizeMdFull': {
                     minHeight: dvh(100),
-                    '&.variantMdBottom': {
+                    '&.variantMdBottom, &.variantMdTop': {
                       minHeight: '100%',
                     },
                   },

package/Overlay/components/OverlayContainer.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@mui/material'
-import { LayoutOverlayBaseProps } from './OverlayBase'
+import type { LayoutOverlayBaseProps } from './OverlayBase'
 
-type OverlayContainerProps = Pick<LayoutOverlayBaseProps, 'active'> & {
+export type OverlayContainerProps = Pick<LayoutOverlayBaseProps, 'active'> & {
   hidden?: boolean
   children: React.ReactNode
 }

package/Overlay/components/OverlayHeader.tsx

@@ -1,11 +1,14 @@
-import { LayoutHeaderProps, LayoutTitle, TitleProps } from '../../Layout'
+import React from 'react'
+import type { LayoutHeaderProps, TitleProps } from '../../Layout'
+import { LayoutTitle } from '../../Layout'
 import { LayoutHeaderClose } from '../../Layout/components/LayoutHeaderClose'
 import { LayoutOverlayHeader } from '../../LayoutOverlay/components/LayoutOverlayHeader'
 
-type OverlayHeaderProps = Omit<LayoutHeaderProps, 'hideBackButton' | 'switchPoint'> &
+export type OverlayHeaderProps = Omit<LayoutHeaderProps, 'hideBackButton' | 'switchPoint'> &
   Pick<TitleProps, 'icon'> & { onClose: () => void }
 
-export const OverlayHeader = (props: OverlayHeaderProps) => {
+/** @public */
+export function OverlayHeader(props: OverlayHeaderProps) {
   const { children, onClose, sx = [], icon, primary, secondary, ...rest } = props
 
   return (
@@ -13,7 +16,7 @@ export const OverlayHeader = (props: OverlayHeaderProps) => {
       noAlign
       sx={[{ '&.noAlign': { mb: 0 } }, ...(Array.isArray(sx) ? sx : [sx])]}
       switchPoint={-10000}
-      size='small'
+      size='responsive'
       hideBackButton
       primary={primary ?? <LayoutHeaderClose onClose={onClose} />}
       secondary={primary ? <LayoutHeaderClose onClose={onClose} /> : secondary}

package/Overlay/components/OverlaySsr.tsx

@@ -2,7 +2,8 @@ import { ScrollerProvider } from '@graphcommerce/framer-scroller'
 import { startTransition, useEffect, useState } from 'react'
 import type { SetOptional } from 'type-fest'
 import { variantsToScrollSnapType } from '../utils/variantsToScrollSnapType'
-import { OverlayBase, LayoutOverlayBaseProps } from './OverlayBase'
+import type { LayoutOverlayBaseProps } from './OverlayBase'
+import { OverlayBase } from './OverlayBase'
 import { OverlayContainer } from './OverlayContainer'
 
 export type OverlayProps = Omit<

package/Overlay/components/OverlayStickyBottom.tsx

@@ -1,4 +1,5 @@
-import { styled, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { styled } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
 import { useScrollY } from '../../Layout'
 

package/Overlay/utils/variantsToScrollSnapType.ts

@@ -1,5 +1,5 @@
-import { ScrollerProviderProps } from '@graphcommerce/framer-scroller'
-import { LayoutOverlayBaseProps } from '../components/OverlayBase'
+import type { ScrollerProviderProps } from '@graphcommerce/framer-scroller'
+import type { LayoutOverlayBaseProps } from '../components/OverlayBase'
 
 type Variants = Partial<Pick<LayoutOverlayBaseProps, 'variantSm' | 'variantMd'>>
 

package/OverlayOrPopperChip/OverlayOrPopperChip.tsx

@@ -1,18 +1,11 @@
-import {
-  lighten,
-  Badge,
-  Chip,
-  ChipProps,
-  SxProps,
-  Typography,
-  useEventCallback,
-  Theme,
-} from '@mui/material'
+import type { ChipProps, SxProps, Theme } from '@mui/material'
+import { Badge, Chip, Typography, lighten, useEventCallback } from '@mui/material'
 import React, { useState } from 'react'
 import { IconSvg } from '../IconSvg'
 import { responsiveVal } from '../Styles'
 import { iconChevronDown, iconChevronUp } from '../icons'
-import { OverlayOrPopperPanel, OverlayOrPopperPanelProps } from './OverlayOrPopperPanel'
+import type { OverlayOrPopperPanelProps } from './OverlayOrPopperPanel'
+import { OverlayOrPopperPanel } from './OverlayOrPopperPanel'
 
 function isMulti(
   selectedLabel: React.ReactNode | React.ReactNode[],
@@ -61,7 +54,7 @@ export function ChipOverlayOrPopper(props: ChipOverlayOrPopperProps) {
     )
   }
 
-  selectedLabel = Array.isArray(selectedLabel) ? selectedLabel[0] : selectedLabel ?? '·'
+  selectedLabel = Array.isArray(selectedLabel) ? selectedLabel[0] : (selectedLabel ?? '·')
 
   const chipSx = chipProps?.sx ?? []
   return (

package/OverlayOrPopperChip/OverlayOrPopperPanel.tsx

@@ -1,9 +1,9 @@
-import { Breakpoint } from '@mui/material'
+import type { Breakpoint } from '@mui/material'
 import dynamic from 'next/dynamic'
 import { startTransition, useEffect, useState } from 'react'
 import { useMatchMedia } from '../hooks'
-import { OverlayPanelProps } from './OverlayPanel'
-import { PopperPanelProps } from './PopperPanel'
+import type { OverlayPanelProps } from './OverlayPanel'
+import type { PopperPanelProps } from './PopperPanel'
 
 const OverlayPanel = dynamic(async () => (await import('./OverlayPanel')).OverlayPanel)
 

package/OverlayOrPopperChip/OverlayPanel.tsx

@@ -1,7 +1,8 @@
 import { Overlay } from '../Overlay/components/Overlay'
-import { OverlayProps } from '../Overlay/components/OverlaySsr'
+import type { OverlayProps } from '../Overlay/components/OverlaySsr'
+import { nonNullable } from '../RenderType/nonNullable'
 import { OverlayPanelActions } from './OverlayPanelActions'
-import { PanelProps } from './types'
+import type { PanelProps } from './types'
 
 export type OverlayPanelProps = PanelProps & {
   overlayProps?: Omit<OverlayProps, 'active' | 'onClosed' | 'children'>
@@ -15,12 +16,17 @@ export function OverlayPanel(props: OverlayPanelProps) {
       {...overlayProps}
       onClosed={onClose}
       active={Boolean(activeEl)}
-      sx={{
-        '& .LayoutOverlayBase-overlayPane': {
-          display: 'grid',
-          gridTemplateRows: 'min-content auto min-content',
+      sx={[
+        {
+          '& .LayoutOverlayBase-overlayPane': {
+            display: 'grid',
+            gridTemplateRows: 'min-content auto min-content',
+          },
         },
-      }}
+        ...(Array.isArray(overlayProps?.sx) ? overlayProps.sx : [overlayProps?.sx]).filter(
+          nonNullable,
+        ),
+      ]}
     >
       {() => (
         <OverlayPanelActions onClose={onClose} {...rest}>

package/OverlayOrPopperChip/OverlayPanelActions.tsx

@@ -7,14 +7,14 @@ import { OverlayStickyBottom } from '../Overlay/components/OverlayStickyBottom'
 import { extendableComponent } from '../Styles'
 import { useFabSize } from '../Theme'
 import { iconClose } from '../icons'
-import { PanelActionsProps } from './types'
+import type { PanelActionsProps } from './types'
 
 const { classes } = extendableComponent(
   'OverlayPanelActions' as const,
   ['root', 'header', 'content', 'footer'] as const,
 )
 
-export const OverlayPanelActions = (props: PanelActionsProps) => {
+export function OverlayPanelActions(props: PanelActionsProps) {
   const { title, children, onReset, onApply, onClose, sx = [] } = props
 
   const fabSize = useFabSize('small')

package/OverlayOrPopperChip/PopperPanel.tsx

@@ -1,7 +1,8 @@
-import { ClickAwayListener, Popper, PopperProps } from '@mui/material'
+import type { PopperProps } from '@mui/material'
+import { ClickAwayListener, Popper } from '@mui/material'
 import { useRef } from 'react'
 import { PopperPanelActions } from './PopperPanelActions'
-import { PanelProps } from './types'
+import type { PanelProps } from './types'
 import { useHandleClickNotDrag } from './useHandleClickNotDrag'
 
 export type PopperPanelProps = PanelProps & {

package/OverlayOrPopperChip/PopperPanelActions.tsx

@@ -1,12 +1,12 @@
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { Fab, Button, Box, Typography } from '@mui/material'
+import { Box, Button, Fab, Typography } from '@mui/material'
 import { IconSvg, useIconSvgSize } from '../IconSvg'
 import { LayoutHeader } from '../Layout'
 import { OverlayStickyBottom } from '../Overlay/components/OverlayStickyBottom'
 import { useFabSize } from '../Theme'
 import { iconClose } from '../icons'
-import { PanelActionsProps } from './types'
+import type { PanelActionsProps } from './types'
 
 export function PopperPanelActions(props: PanelActionsProps) {
   const { title, children, onReset, onClose, onApply, sx = [] } = props

package/OverlayOrPopperChip/types.ts

@@ -1,5 +1,5 @@
-import { Theme, SxProps } from '@mui/material'
-import React from 'react'
+import type { SxProps, Theme } from '@mui/material'
+import type React from 'react'
 
 export type PanelActionsProps = {
   children: React.ReactNode

package/OverlayOrPopperChip/useHandleClickNotDrag.ts

@@ -1,7 +1,9 @@
 import { useMotionValue } from 'framer-motion'
-import React, { useEffect } from 'react'
+import type React from 'react'
+import { useEffect } from 'react'
 
 /** When an element is dragged it will still register clicks. */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useHandleClickNotDrag(elementRef: React.MutableRefObject<any>) {
   const movement = useMotionValue<'click' | 'drag' | null>(null)
 

package/Page/CssAndFramerMotionProvider.tsx

@@ -1,6 +1,7 @@
 import { GlobalStyles } from '@mui/material'
 import { LazyMotion } from 'framer-motion'
-import { EmotionProvider, EmotionProviderProps } from '../Styles/EmotionProvider'
+import type { EmotionProviderProps } from '../Styles/EmotionProvider'
+import { EmotionProvider } from '../Styles/EmotionProvider'
 
 export type CssAndFramerMotionProviderProps = EmotionProviderProps
 

package/Page/types.ts

@@ -1,12 +1,12 @@
-import { ParsedUrlQuery } from 'querystring'
-import { UpPage } from '@graphcommerce/framer-next-pages/types'
+import type { UpPage } from '@graphcommerce/framer-next-pages/types'
 // todo: remove references to GraphQL
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { NormalizedCacheObject } from '@graphcommerce/graphql'
-import {
-  GetStaticProps as GetStaticPropsNext,
+import type { NormalizedCacheObject } from '@graphcommerce/graphql'
+import type {
   GetServerSideProps as GetServerSidePropsNext,
+  GetStaticProps as GetStaticPropsNext,
 } from 'next'
+import type { ParsedUrlQuery } from 'querystring'
 
 type AnyObj = Record<string, unknown>
 

package/PageLoadIndicator/PageLoadIndicator.tsx

@@ -1,11 +1,12 @@
-import { LinearProgress, LinearProgressProps } from '@mui/material'
+import type { LinearProgressProps } from '@mui/material'
+import { LinearProgress } from '@mui/material'
 import { m, motionValue, useTransform } from 'framer-motion'
 import { useRouter } from 'next/router'
 import { forwardRef, useEffect, useState } from 'react'
 
 export const showPageLoadIndicator = motionValue(false)
 
-const MLinearProgress = m(
+const MLinearProgress = m.create(
   forwardRef((props: Omit<LinearProgressProps, 'style'>, ref: LinearProgressProps['ref']) => (
     <LinearProgress ref={ref} {...props} />
   )),