@graphcommerce/next-ui 8.0.0-canary.40 → 8.0.0-canary.69

package/CHANGELOG.md

@@ -1,12 +1,85 @@
 # Change Log
 
-## 8.0.0-canary.40
+## 8.0.0-canary.69
+
+## 7.1.0-canary.68
+
+## 7.1.0-canary.67
 
 ### Patch Changes
 
-- [#2077](https://github.com/graphcommerce-org/graphcommerce/pull/2077) [`727d1004d`](https://github.com/graphcommerce-org/graphcommerce/commit/727d1004dfcb7dddf6e35b6b157a34491bb05cc6) - Fixed ItemScroller component className. Changed from SidebarSlider to ItemScroller ([@bramvanderholst](https://github.com/bramvanderholst))
+- [#2108](https://github.com/graphcommerce-org/graphcommerce/pull/2108) [`7fc4bb9`](https://github.com/graphcommerce-org/graphcommerce/commit/7fc4bb925c59da46961c9656a2a67b37a9c2d652) - Removed the 'NoSSR' functionality from `<WaitForQueries/>` component as it slows down rendering. The 'feature' was necessary for the following use case: When hydrating a component that was server rendered and was living inside a `<Suspense />` component. It would cause an hydration error and this was the workaround. With useSuspenseQuery and React 18, this problem will not occur.
+  ([@StefanAngenent](https://github.com/StefanAngenent))
+
+## 7.1.0-canary.66
+
+## 7.1.0-canary.65
+
+## 7.1.0-canary.64
+
+## 7.1.0-canary.63
+
+## 7.1.0-canary.62
+
+## 7.1.0-canary.61
+
+### Patch Changes
+
+- [#2125](https://github.com/graphcommerce-org/graphcommerce/pull/2125) [`5224ee500`](https://github.com/graphcommerce-org/graphcommerce/commit/5224ee5001c94a19f226fa36106e76739319297c) - If there is an open menu in an overlay, pressing the escape button now closes the menu instead of the overlay. ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 7.1.0-canary.60
+
+## 7.1.0-canary.59
+
+## 7.1.0-canary.58
+
+### Patch Changes
+
+- [#2121](https://github.com/graphcommerce-org/graphcommerce/pull/2121) [`a5da6ffc8`](https://github.com/graphcommerce-org/graphcommerce/commit/a5da6ffc8be359e93c7bde986134f7162aae13b9) - Change the critical css injection location to be in the head instead of `<style>` tags in the body. It has a number of negative consequences, such as the famous "flash of unstyled content" (FOUC) and the re-paint and re-layout required. ([@paales](https://github.com/paales))
+
+## 7.1.0-canary.57
+
+## 7.1.0-canary.56
+
+### Patch Changes
 
-## 7.1.0-canary.39
+- [#2123](https://github.com/graphcommerce-org/graphcommerce/pull/2123) [`8ad60f255`](https://github.com/graphcommerce-org/graphcommerce/commit/8ad60f255b747858c35dd6b6cf5c90147d960082) - Fixed schema-dts dependency issue ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 7.1.0-canary.55
+
+### Patch Changes
+
+- [#2004](https://github.com/graphcommerce-org/graphcommerce/pull/2004) [`da2135744`](https://github.com/graphcommerce-org/graphcommerce/commit/da2135744dddfa0d211c59589090ebb1977c38c9) - Added info icon for Snackbar when severity is set to info ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2004](https://github.com/graphcommerce-org/graphcommerce/pull/2004) [`d608830ce`](https://github.com/graphcommerce-org/graphcommerce/commit/d608830ce77f85ff725cc106b9fc55a22012c74c) - Added ‘disableBackdropClick’ prop to MessageSnackbar to allow page interaction without closing the snackbar ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2004](https://github.com/graphcommerce-org/graphcommerce/pull/2004) [`94e1ae811`](https://github.com/graphcommerce-org/graphcommerce/commit/94e1ae811fe9eb0051863e8be91c6399ddcdf22f) - Added DismissibleSnackbar component to allow messages to be shown only once ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2004](https://github.com/graphcommerce-org/graphcommerce/pull/2004) [`53947d39f`](https://github.com/graphcommerce-org/graphcommerce/commit/53947d39f2f3ee578c14903c96a2b356d99d9475) - Implemented Message variant for RowColumnOne to show an important message which, after dismissing, will not show again ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 7.1.0-canary.54
+
+## 7.1.0-canary.53
+
+## 7.1.0-canary.52
+
+## 7.1.0-canary.51
+
+## 7.1.0-canary.50
+
+## 7.1.0-canary.49
+
+## 7.1.0-canary.48
+
+## 7.1.0-canary.47
+
+## 7.1.0-canary.46
+
+## 7.1.0-canary.45
+
+### Patch Changes
+
+- [#2077](https://github.com/graphcommerce-org/graphcommerce/pull/2077) [`727d1004d`](https://github.com/graphcommerce-org/graphcommerce/commit/727d1004dfcb7dddf6e35b6b157a34491bb05cc6) - Fixed ItemScroller component className. Changed from SidebarSlider to ItemScroller ([@bramvanderholst](https://github.com/bramvanderholst))
 
 ## 7.1.0-canary.38
 
@@ -1516,31 +1589,31 @@
   All occurences of `<Trans>` and `t` need to be replaced:
 
   ```tsx
-  import { Trans, t } from '@lingui/macro'
+  import { Trans, t } from "@lingui/macro";
 
   function MyComponent() {
-    const foo = 'bar'
+    const foo = "bar";
     return (
       <div aria-label={t`Account ${foo}`}>
         <Trans>My Translation {foo}</Trans>
       </div>
-    )
+    );
   }
   ```
 
   Needs to be replaced with:
 
   ```tsx
-  import { Trans } from '@lingui/react'
-  import { i18n } from '@lingui/core'
+  import { Trans } from "@lingui/react";
+  import { i18n } from "@lingui/core";
 
   function MyComponent() {
-    const foo = 'bar'
+    const foo = "bar";
     return (
       <div aria-label={i18n._(/* i18n */ `Account {foo}`, { foo })}>
-        <Trans key='My Translation {foo}' values={{ foo }}></Trans>
+        <Trans key="My Translation {foo}" values={{ foo }}></Trans>
       </div>
-    )
+    );
   }
   ```
 

package/JsonLd/JsonLd.tsx

@@ -1,8 +1,6 @@
 import Head from 'next/head'
 import { safeJsonLdReplacer } from './safeJsonLdReplacer'
 
-export * as SchemaDts from 'schema-dts'
-
 export function JsonLd<T extends { '@type': string }>(props: {
   item: T & { '@context': 'https://schema.org' }
 }) {

package/Overlay/components/OverlayBase.tsx

@@ -311,7 +311,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
   const handleEscape = (e: KeyboardEvent | Event) => {
     if (active && (e as KeyboardEvent)?.key === 'Escape') closeOverlay()
   }
-  useDomEvent(windowRef, 'keyup', handleEscape, { passive: true })
+  useDomEvent(windowRef, 'keydown', handleEscape, { passive: true })
 
   const dragging = useMotionValue(false)
   const scrollerElementRef = scrollerRef as React.RefObject<HTMLElement>

package/Overlay/components/index.ts

@@ -1,2 +1,3 @@
 export * from './OverlayBase'
 export * from './Overlay'
+export * from './OverlayStickyBottom'

package/Page/CssAndFramerMotionProvider.tsx

@@ -1,9 +1,8 @@
 import { GlobalStyles } from '@mui/material'
 import { LazyMotion } from 'framer-motion'
+import { EmotionProvider, EmotionProviderProps } from '../Styles/EmotionProvider'
 
-export type GraphCommerceProviderProps = {
-  children: React.ReactNode
-}
+export type CssAndFramerMotionProviderProps = EmotionProviderProps
 
 /**
  * For [@emotion/core](https://emotion.sh/docs/introduction) and
@@ -12,22 +11,25 @@ export type GraphCommerceProviderProps = {
  * - Wrapps the app to lazily load framer-motion.
  * - Wrapps the app to have Emotion CSS styles
  */
-export function CssAndFramerMotionProvider({ children }: GraphCommerceProviderProps) {
+export function CssAndFramerMotionProvider(props: CssAndFramerMotionProviderProps) {
+  const { children, emotionCache } = props
   return (
-    <LazyMotion features={async () => (await import('./framerFeatures')).default} strict>
-      {children}
-      <GlobalStyles
-        styles={{
-          ':root': {
-            '--client-size-y': '100vh',
-            '--client-size-x': '100vw',
-            '@supports(height: 100dvh)': {
-              '--client-size-y': '100dvh',
-              '--client-size-x': '100dvw',
+    <EmotionProvider emotionCache={emotionCache}>
+      <LazyMotion features={async () => (await import('./framerFeatures')).default} strict>
+        {children}
+        <GlobalStyles
+          styles={{
+            ':root': {
+              '--client-size-y': '100vh',
+              '--client-size-x': '100vw',
+              '@supports(height: 100dvh)': {
+                '--client-size-y': '100dvh',
+                '--client-size-x': '100dvw',
+              },
             },
-          },
-        }}
-      />
-    </LazyMotion>
+          }}
+        />
+      </LazyMotion>
+    </EmotionProvider>
   )
 }

package/Row/ColumnOne/variant/VariantMessage.tsx

@@ -0,0 +1,12 @@
+import {
+  DismissibleSnackbar,
+  DismissibleSnackbarProps,
+} from '../../../Snackbar/DismissibleSnackbar'
+
+export type VariantMessageProps = DismissibleSnackbarProps
+
+export function VariantMessage(props: VariantMessageProps) {
+  const { ...rest } = props
+
+  return <DismissibleSnackbar variant='pill' severity='info' disableBackdropClick {...rest} />
+}

package/Row/ColumnOne/variant/index.ts

@@ -0,0 +1 @@
+export * from './VariantMessage'

package/Row/index.ts

@@ -1,6 +1,7 @@
 export * from './Row'
 export * from './ButtonLinkList'
 export * from './ColumnOne/ColumnOne'
+export * from './ColumnOne/variant'
 export * from './ColumnOneBoxed/ColumnOneBoxed'
 export * from './ColumnOneCentered/ColumnOneCentered'
 export * from './ColumnThree/ColumnThree'

package/Snackbar/DismissibleSnackbar.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react'
+import { MessageSnackbar } from './MessageSnackbar'
+import { MessageSnackbarProps } from './MessageSnackbarImpl'
+
+export type DismissibleSnackbarProps = MessageSnackbarProps & {
+  id: string
+  storageType?: 'localStorage' | 'sessionStorage'
+}
+export function DismissibleSnackbar(props: DismissibleSnackbarProps) {
+  const { storageType = 'localStorage', id, onClose, ...rest } = props
+  const messageId = `DismissibleSnackbar_${id}`
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    setOpen(!globalThis[storageType]?.getItem(messageId))
+  }, [messageId, storageType])
+
+  return (
+    <MessageSnackbar
+      {...rest}
+      open={open}
+      onClose={() => {
+        globalThis[storageType]?.setItem(messageId, `${Date.now()}`)
+        onClose?.()
+      }}
+    />
+  )
+}

package/Snackbar/MessageSnackbarImpl.tsx

@@ -14,6 +14,7 @@ import React, { useEffect, useState } from 'react'
 import { IconSvg } from '../IconSvg'
 import { extendableComponent, breakpointVal } from '../Styles'
 import { iconClose, iconCheckmark, iconSadFace } from '../icons'
+import iconInfo from '../icons/info.svg'
 
 type Size = 'normal' | 'wide'
 type Variant = 'contained' | 'pill'
@@ -34,6 +35,10 @@ type OwnerState = {
   size?: Size
   severity?: 'success' | 'info' | 'warning' | 'error'
   variant?: Variant
+  /**
+   * Setting this to true allows interaction with the rest of the page without closing the Snackbar
+   */
+  disableBackdropClick?: boolean
 }
 
 const name = 'MessageSnackbarImpl' as const
@@ -56,6 +61,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
     onClose,
     severity = 'info',
     sx,
+    disableBackdropClick,
     ...snackbarProps
   } = props
 
@@ -65,7 +71,11 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
     setShowSnackbar(!!open)
   }, [open])
 
-  const hideSnackbar = () => {
+  const hideSnackbar = (event: React.SyntheticEvent | Event, reason?: string) => {
+    if (disableBackdropClick && reason === 'clickaway') {
+      return
+    }
+
     setShowSnackbar(false)
     onClose?.()
   }
@@ -80,6 +90,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
   }
 
   let icon = iconCheckmark
+  if (severity === 'info') icon = iconInfo
   if (severity === 'error') icon = iconSadFace
 
   return (
@@ -91,7 +102,13 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
         open={showSnackbar}
         autoHideDuration={autoHide ? 5000 : null}
         className={classes.root}
-        sx={sx}
+        sx={[
+          {
+            pointerEvents: 'none',
+            '& > *': { pointerEvents: 'auto' },
+          },
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
         onClose={hideSnackbar}
       >
         <SnackbarContent

package/Styles/EmotionProvider.tsx

@@ -1,14 +1,14 @@
-import createCache from '@emotion/cache'
 import type { EmotionCache } from '@emotion/cache'
 import { CacheProvider } from '@emotion/react'
+import { createEmotionCache } from './createEmotionCache'
 
-let muiCache: EmotionCache | undefined
-export const createMuiCache = () => {
-  muiCache = createCache({ key: 'mui' })
-  return muiCache
-}
+export type EmotionProviderProps = { children?: React.ReactNode; emotionCache?: EmotionCache }
+
+const clientSideEmotionCache = createEmotionCache()
 
 /** Provider that is supposed to be used in your `pages/_app.tsx` */
-export function EmotionProvider({ children }: { children: React.ReactNode }) {
-  return <CacheProvider value={muiCache ?? createMuiCache()}>{children}</CacheProvider>
+export function EmotionProvider(props: EmotionProviderProps) {
+  const { children, emotionCache = clientSideEmotionCache } = props
+
+  return <CacheProvider value={emotionCache}>{children}</CacheProvider>
 }

package/Styles/createEmotionCache.ts

@@ -0,0 +1,14 @@
+import createCache from '@emotion/cache'
+
+export const createEmotionCache = () => {
+  let insertionPoint: HTMLElement | undefined
+
+  if (typeof window !== 'undefined') {
+    const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
+      'meta[name="emotion-insertion-point"]',
+    )
+    insertionPoint = emotionInsertionPoint ?? undefined
+  }
+
+  return createCache({ key: 'mui-style', insertionPoint })
+}

package/Styles/withEmotionCache.tsx

@@ -1,36 +1,46 @@
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace'
 import createEmotionServer from '@emotion/server/create-instance'
 // eslint-disable-next-line @next/next/no-document-import-in-page
+import { AppType } from 'next/app'
 import type NextDocument from 'next/document'
 // eslint-disable-next-line @next/next/no-document-import-in-page
 import type { DocumentContext, DocumentInitialProps } from 'next/document'
-import { createMuiCache } from './EmotionProvider'
+import { EmotionProviderProps } from './EmotionProvider'
+import { createEmotionCache } from './createEmotionCache'
 
 export type EmotionCacheProps = { emotionStyleTags: EmotionJSX.Element[] }
 
 export function withEmotionCache(Document: typeof NextDocument): typeof NextDocument {
   return class DocumentWithEmotionCache extends Document {
     static async getInitialProps(ctx: DocumentContext) {
-      const emotionServer = createEmotionServer(createMuiCache())
-      const initialProps = await Document.getInitialProps(ctx)
+      const cache = createEmotionCache()
+      const emotionServer = createEmotionServer(cache)
+
+      const originalRenderPage = ctx.renderPage
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp:
+            (App: React.ComponentType<React.ComponentProps<AppType> & EmotionProviderProps>) =>
+            (props) => <App emotionCache={cache} {...props} />,
+        })
 
-      const emotionStyleTags = emotionServer
-        .extractCriticalToChunks(initialProps.html)
-        .styles.filter(({ css }) => css !== '')
-        .map((style) => (
-          <style
-            data-emotion={`${style.key} ${style.ids.join(' ')}`}
-            key={style.key}
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: style.css }}
-          />
-        ))
+      const initialProps = await Document.getInitialProps(ctx)
+      // This is important. It prevents Emotion to render invalid HTML.
+      // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
+      const emotionStyles = emotionServer.extractCriticalToChunks(initialProps.html)
+      const emotionStyleTags = emotionStyles.styles.map((style) => (
+        <style
+          data-emotion={`${style.key} ${style.ids.join(' ')}`}
+          key={style.key}
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: style.css }}
+        />
+      ))
 
-      const props: DocumentInitialProps & EmotionCacheProps = {
+      return {
         ...initialProps,
         emotionStyleTags,
       }
-      return props
     }
   }
 }

package/Theme/MuiSnackbar.ts

@@ -22,8 +22,10 @@ export const MuiSnackbar: SnackbarVariants = [
           },
         },
       '&.MuiSnackbar-anchorOriginBottomCenter': {
-        left: 0,
-        right: 0,
+        [theme.breakpoints.up('md')]: {
+          left: theme.page.horizontal,
+          right: theme.page.horizontal,
+        },
         transform: 'unset',
       },
     }),

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.0.0-canary.40",
+  "version": "8.0.0-canary.69",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -20,19 +20,19 @@
     "react-is": "^18.2.0"
   },
   "devDependencies": {
-    "@types/cookie": "^0.5.4",
+    "@types/cookie": "^0.6.0",
     "@types/react-is": "^18.2.4",
     "schema-dts": "^1.1.2",
-    "typescript": "5.2.2"
+    "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "8.0.0-canary.40",
-    "@graphcommerce/framer-next-pages": "8.0.0-canary.40",
-    "@graphcommerce/framer-scroller": "8.0.0-canary.40",
-    "@graphcommerce/framer-utils": "8.0.0-canary.40",
-    "@graphcommerce/image": "8.0.0-canary.40",
-    "@graphcommerce/prettier-config-pwa": "8.0.0-canary.40",
-    "@graphcommerce/typescript-config-pwa": "8.0.0-canary.40",
+    "@graphcommerce/eslint-config-pwa": "^8.0.0-canary.69",
+    "@graphcommerce/framer-next-pages": "^8.0.0-canary.69",
+    "@graphcommerce/framer-scroller": "^8.0.0-canary.69",
+    "@graphcommerce/framer-utils": "^8.0.0-canary.69",
+    "@graphcommerce/image": "^8.0.0-canary.69",
+    "@graphcommerce/prettier-config-pwa": "^8.0.0-canary.69",
+    "@graphcommerce/typescript-config-pwa": "^8.0.0-canary.69",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",