@graphcommerce/next-ui 4.4.0 → 4.5.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 4.5.0
+
+### Minor Changes
+
+- [#1368](https://github.com/graphcommerce-org/graphcommerce/pull/1368) [`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a) Thanks [@paales](https://github.com/paales)! - Added a new <ErrorSnackbar /> component to more easily create an error snackbar.
+
+### Patch Changes
+
+- [#1368](https://github.com/graphcommerce-org/graphcommerce/pull/1368) [`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a) Thanks [@paales](https://github.com/paales)! - <FormDiv contained/> would throw an error that contained isn't a recognized prop
+
+* [#1369](https://github.com/graphcommerce-org/graphcommerce/pull/1369) [`ae6449502`](https://github.com/graphcommerce-org/graphcommerce/commit/ae64495024a455bbe5188588604368c1542840c9) Thanks [@paales](https://github.com/paales)! - Upgraded dependencies
+
+* Updated dependencies [[`ae6449502`](https://github.com/graphcommerce-org/graphcommerce/commit/ae64495024a455bbe5188588604368c1542840c9)]:
+  - @graphcommerce/framer-next-pages@3.1.4
+  - @graphcommerce/framer-scroller@2.1.3
+  - @graphcommerce/framer-utils@3.1.1
+  - @graphcommerce/image@3.1.2
+
 ## 4.4.0
 
 ### Minor Changes

package/Form/Form.tsx

@@ -34,4 +34,6 @@ export const Form = styled('form', {
   shouldForwardProp: (prop) => prop !== 'contained',
 })<FormStyleProps>(styles)
 
-export const FormDiv = styled('div')<FormStyleProps>(styles)
+export const FormDiv = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'contained',
+})<FormStyleProps>(styles)

package/Layout/components/LayoutProvider.tsx

@@ -9,6 +9,7 @@ export type LayoutProviderProps = {
 
 export function LayoutProvider(props: LayoutProviderProps) {
   const { children, scroll } = props
+
   return (
     <layoutContext.Provider value={useMemo(() => ({ scroll }), [scroll])}>
       {children}

package/LayoutOverlay/test/LayoutOverlayDemo.tsx

@@ -1,6 +1,5 @@
-import { ParsedUrlQuery } from 'querystring'
-import { useRouter } from 'next/router'
 import { useCallback } from 'react'
+import { useUrlQuery } from '../../useUrlQuery/useUrlQuery'
 import { LayoutOverlay, LayoutOverlayProps } from '../components/LayoutOverlay'
 
 export type LayoutOverlayState = Omit<
@@ -8,19 +7,8 @@ export type LayoutOverlayState = Omit<
   'children' | 'sx' | 'sxBackdrop' | 'mdSpacingTop' | 'smSpacingTop'
 >
 
-function useQueryState<T extends ParsedUrlQuery>(builder: (query: T) => T) {
-  const { query, replace } = useRouter()
-  const queryState = builder(query as T)
-
-  const setRouterQuery = (partialQuery: T) => {
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    replace({ query: { ...queryState, ...partialQuery } }, undefined, { shallow: true })
-  }
-  return [queryState, setRouterQuery] as const
-}
-
 export function useLayoutState() {
-  const [routerQuery, setRouterQuery] = useQueryState<LayoutOverlayState>(
+  const [routerQuery, setRouterQuery] = useUrlQuery<LayoutOverlayState>(
     useCallback(
       ({ sizeMd, sizeSm, justifyMd, justifySm, variantMd, variantSm }) => ({
         sizeMd,

package/Snackbar/ErrorSnackbar.tsx

@@ -0,0 +1,24 @@
+import { Trans } from '@lingui/macro'
+import { Button } from '@mui/material'
+import { MessageSnackbar } from './MessageSnackbar'
+import { MessageSnackbarImplProps } from './MessageSnackbarImpl'
+
+export type ErrorSnackbarProps = MessageSnackbarImplProps
+
+export function ErrorSnackbar(props: ErrorSnackbarProps) {
+  const { action, ...passedProps } = props
+  return (
+    <MessageSnackbar
+      variant='pill'
+      severity='error'
+      {...passedProps}
+      action={
+        action ?? (
+          <Button size='medium' variant='pill' color='secondary'>
+            <Trans>Ok</Trans>
+          </Button>
+        )
+      }
+    />
+  )
+}

package/TextInputNumber/TextInputNumber.tsx

@@ -42,7 +42,7 @@ export function TextInputNumber(props: TextInputNumberProps) {
   const classes = withState({})
 
   const ref = useRef<HTMLInputElement>(null)
-  const forkRef = useForkRef<HTMLInputElement>(ref, inputRef as Ref<HTMLInputElement>)
+  const forkRef = useForkRef(ref, inputRef as Ref<HTMLInputElement>)
 
   const [direction, setDirection] = useState<'up' | 'down' | 'runUp' | 'runDown' | null>(null)
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/index.ts

@@ -22,6 +22,7 @@ export * from './FullPageMessage/FullPageMessage'
 export * from './Highlight/Highlight'
 export * from './IconHeader/IconHeader'
 export * from './icons'
+export * from './IconSvg'
 export * from './JsonLd/JsonLd'
 export * from './Layout'
 export * from './LayoutDefault'
@@ -37,15 +38,16 @@ export * from './SectionContainer/SectionContainer'
 export * from './SectionHeader/SectionHeader'
 export * from './Separator/Separator'
 export * from './Snackbar/MessageSnackbar'
+export * from './Snackbar/ErrorSnackbar'
 export * from './Snackbar/MessageSnackbarImpl'
 export * from './StarRatingField/StarRatingField'
 export * from './Stepper/Stepper'
 export * from './Styles'
-export * from './IconSvg'
 export * from './TextInputNumber/TextInputNumber'
 export * from './Theme'
 export * from './TimeAgo/TimeAgo'
 export * from './ToggleButton/ToggleButton'
 export * from './ToggleButtonGroup/ToggleButtonGroup'
+export * from './useUrlQuery/useUrlQuery'
 export * from './UspList/UspList'
 export * from './UspList/UspListItem'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -19,14 +19,13 @@
     "@emotion/react": "^11.8.2",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",
-    "@graphcommerce/framer-next-pages": "^3.1.3",
-    "@graphcommerce/framer-scroller": "^2.1.2",
-    "@graphcommerce/framer-utils": "^3.1.0",
-    "@graphcommerce/image": "^3.1.1",
-    "react-is": "^17.0.2",
+    "@graphcommerce/framer-next-pages": "^3.1.4",
+    "@graphcommerce/framer-scroller": "^2.1.3",
+    "@graphcommerce/framer-utils": "^3.1.1",
+    "@graphcommerce/image": "^3.1.2",
+    "react-is": "^18.0.0",
     "react-schemaorg": "^2.0.0",
-    "schema-dts": "^1.1.0",
-    "type-fest": "^2.12.0"
+    "schema-dts": "^1.1.0"
   },
   "peerDependencies": {
     "@lingui/macro": "^3.13.2",
@@ -38,11 +37,12 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.2",
-    "@graphcommerce/prettier-config-pwa": "^4.0.4",
+    "@graphcommerce/eslint-config-pwa": "^4.1.3",
+    "@graphcommerce/prettier-config-pwa": "^4.0.5",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
-    "@playwright/test": "^1.19.2",
+    "@playwright/test": "^1.20.1",
     "@types/react-is": "^17.0.3",
-    "typescript": "^4.6.2"
+    "type-fest": "2.12.1",
+    "typescript": "4.6.3"
   }
 }

package/useUrlQuery/useUrlQuery.tsx

@@ -0,0 +1,19 @@
+import { ParsedUrlQuery } from 'querystring'
+import { useRouter } from 'next/router'
+import { useCallback } from 'react'
+
+export function useUrlQuery<T extends ParsedUrlQuery>(builder: (query: T) => T = (query) => query) {
+  const { query, replace } = useRouter()
+  const queryState = builder(query as T)
+
+  const setRouterQuery = useCallback(
+    (partialQuery: T) => {
+      if (JSON.stringify(queryState) === JSON.stringify(partialQuery)) return
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      replace({ query: { ...queryState, ...partialQuery } }, undefined, { shallow: true })
+    },
+    [queryState, replace],
+  )
+
+  return [queryState, setRouterQuery] as const
+}