@graphcommerce/next-ui 4.4.0 → 4.6.0

package/Button/LinkOrButton.tsx

@@ -14,6 +14,7 @@ export type LinkOrButtonProps = {
   button?: ButtonProps
   link?: LinkProps
   breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  disabled?: boolean
 } & SharedProperties<
   Omit<ButtonProps, 'sx'>,
   Omit<LinkProps, 'color' | 'sx'> & Pick<ButtonProps, 'endIcon' | 'startIcon' | 'color' | 'loading'>
@@ -29,6 +30,7 @@ export const LinkOrButton = React.forwardRef<
     breakpoint = 'md',
     button,
     link,
+    disabled,
 
     // Shared props
     loading,
@@ -54,6 +56,7 @@ export const LinkOrButton = React.forwardRef<
         ref={buttonRef}
         color={color}
         loading={loading}
+        disabled={disabled}
         sx={[
           {
             display: {
@@ -73,13 +76,17 @@ export const LinkOrButton = React.forwardRef<
         variant='body2'
         {...sharedProps}
         {...link}
-        color={loading ? 'text.disabled' : color}
-        aria-disabled={loading}
+        color={loading || disabled ? 'action.disabled' : color}
+        aria-disabled={loading || disabled}
         sx={[
           {
             display: { xs: 'inline-flex', [breakpoint]: 'none' },
             alignItems: 'center',
           },
+          !!disabled && ((theme)=>({
+            opacity: theme.palette.action.disabledOpacity,
+            pointerEvents: 'none'
+          })),
           ...(Array.isArray(linkSx) ? linkSx : [linkSx]),
         ]}
       >

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # Change Log
 
+## 4.6.0
+
+### Minor Changes
+
+- [#1386](https://github.com/graphcommerce-org/graphcommerce/pull/1386) [`3c801f45c`](https://github.com/graphcommerce-org/graphcommerce/commit/3c801f45c7df55131acf30ae2fe0d2344830d480) Thanks [@FrankHarland](https://github.com/FrankHarland)! - feat: add disabled support to LinkOrButton component
+
+### Patch Changes
+
+- [#1388](https://github.com/graphcommerce-org/graphcommerce/pull/1388) [`3192fab82`](https://github.com/graphcommerce-org/graphcommerce/commit/3192fab82560e2211dfcacadc3b0b305260527d8) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - ConfigurableOptions size=small didn't render correctly when label were to large. The buttons will now just wrap instead of trying to be on a grid when the size=small.
+
+* [#1385](https://github.com/graphcommerce-org/graphcommerce/pull/1385) [`8a354d1cd`](https://github.com/graphcommerce-org/graphcommerce/commit/8a354d1cd4757497ddfc9b1969a0addbc8ff616b) Thanks [@NickdeK](https://github.com/NickdeK)! - Prevent sx prop from being passed to form element
+
+* Updated dependencies [[`0e425e85e`](https://github.com/graphcommerce-org/graphcommerce/commit/0e425e85ee8fed280349317ee0440c7bceea5823)]:
+  - @graphcommerce/image@3.1.4
+  - @graphcommerce/framer-scroller@2.1.5
+
+## 4.5.1
+
+### Patch Changes
+
+- [#1378](https://github.com/graphcommerce-org/graphcommerce/pull/1378) [`b610a6e40`](https://github.com/graphcommerce-org/graphcommerce/commit/b610a6e4049e8c9e8b5d2aeff31b8e1bfc24abe5) Thanks [@paales](https://github.com/paales)! - Pin all versions internally so we can’t end up in an unfixable state for the user
+
+- Updated dependencies [[`b610a6e40`](https://github.com/graphcommerce-org/graphcommerce/commit/b610a6e4049e8c9e8b5d2aeff31b8e1bfc24abe5)]:
+  - @graphcommerce/framer-next-pages@3.1.5
+  - @graphcommerce/framer-scroller@2.1.4
+  - @graphcommerce/image@3.1.3
+
+## 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

@@ -31,7 +31,9 @@ const styles = ({ theme, contained = false, background }: { theme: Theme } & For
   ])
 
 export const Form = styled('form', {
-  shouldForwardProp: (prop) => prop !== 'contained',
+  shouldForwardProp: (prop) => prop !== 'contained' && prop !== 'sx',
 })<FormStyleProps>(styles)
 
-export const FormDiv = styled('div')<FormStyleProps>(styles)
+export const FormDiv = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'contained' && prop !== 'sx',
+})<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,4 @@
-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,31 +6,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>(
-    useCallback(
-      ({ sizeMd, sizeSm, justifyMd, justifySm, variantMd, variantSm }) => ({
-        sizeMd,
-        sizeSm,
-        justifyMd,
-        justifySm,
-        variantMd,
-        variantSm,
-      }),
-      [],
-    ),
-  )
+  const [routerQuery, setRouterQuery] = useUrlQuery<LayoutOverlayState>()
 
   return [routerQuery, setRouterQuery] as const
 }

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/ToggleButton/ToggleButton.tsx

@@ -60,7 +60,6 @@ export const ToggleButton = React.forwardRef<any, ToggleButtonProps>((props, ref
       classes={classes}
       sx={[
         (theme) => ({
-          borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
           border: 1,
           borderColor: 'divider',
           bgcolor: 'background.paper',
@@ -76,10 +75,15 @@ export const ToggleButton = React.forwardRef<any, ToggleButtonProps>((props, ref
             }`,
           },
           ':not(&.sizeSmall)': {
+            borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
             padding: `${theme.spacings.xxs} ${theme.spacings.xs}`,
           },
           '&.sizeSmall': {
-            aspectRatio: `4/3`,
+            borderRadius: responsiveVal(
+              theme.shape.borderRadius * 1,
+              theme.shape.borderRadius * 1.5,
+            ),
+            padding: `8px 12px`,
           },
         }),
         ...(Array.isArray(sx) ? sx : [sx]),

package/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -63,19 +63,23 @@ const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonGroupProp
       className={`${classes.root} ${className ?? ''}`}
       sx={[
         (theme) => ({
-          display: 'grid',
           rowGap: theme.spacings.xxs,
           columnGap: theme.spacings.xs,
           '&.orientationVertical': {
             gridAutoFlow: 'column',
           },
           '&.sizeSmall.orientationHorizontal': {
-            gridTemplateColumns: `repeat(auto-fill, minmax(60px, 1fr))`,
+            display: 'flex',
+            flexWrap: 'wrap',
+            rowGap: '8px',
+            columnGap: '8px',
           },
           '&.sizeMedium.orientationHorizontal': {
+            display: 'grid',
             gridTemplateColumns: 'repeat(2, 1fr)',
           },
           '&.sizeLarge.orientationHorizontal': {
+            display: 'grid',
             gridTemplateColumns: 'repeat(2, 1fr)',
           },
         }),

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.6.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -19,30 +19,30 @@
     "@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.5",
+    "@graphcommerce/framer-scroller": "2.1.5",
+    "@graphcommerce/framer-utils": "3.1.1",
+    "@graphcommerce/image": "3.1.4",
+    "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",
     "@mui/lab": "^5.0.0-alpha.68",
-    "@mui/material": "^5.4.1",
+    "@mui/material": "5.5.3",
     "framer-motion": "^6.2.4",
-    "next": "^12.0.10",
+    "next": "12.1.2",
     "react": "^17.0.2",
     "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.4",
+    "@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,23 @@
+import { useRouter } from 'next/router'
+import { useCallback } from 'react'
+
+export function useUrlQuery<T extends Record<string, string | null>>() {
+  const { query, replace } = useRouter()
+
+  const setRouterQuery = useCallback(
+    (incomming: T) => {
+      const current = Object.fromEntries(new URLSearchParams(window.location.search).entries())
+      const newQuery = Object.fromEntries(
+        Object.entries({ ...current, ...incomming }).filter(([, value]) => value !== null),
+      )
+
+      if (JSON.stringify(current) === JSON.stringify(newQuery)) return
+
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      replace({ query: newQuery }, undefined, { shallow: true })
+    },
+    [replace],
+  )
+
+  return [query as T, setRouterQuery] as const
+}