@graphcommerce/next-ui 4.5.0 → 4.6.1

package/Button/LinkOrButton.tsx

@@ -1,6 +1,6 @@
 import { Link, LinkProps, useForkRef } from '@mui/material'
 import React, { useRef } from 'react'
-import { ConditionalExcept } from 'type-fest'
+import type { ConditionalExcept } from 'type-fest'
 import { Button, ButtonProps } from './Button'
 
 type OmitNever<T extends Record<string, unknown>> = {
@@ -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,18 @@ 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,48 @@
 # Change Log
 
+## 4.6.1
+
+### Patch Changes
+
+- [#1399](https://github.com/graphcommerce-org/graphcommerce/pull/1399) [`fb277d8e1`](https://github.com/graphcommerce-org/graphcommerce/commit/fb277d8e1e3612c5e9cf890a30d19cfd1ff70542) Thanks [@paales](https://github.com/paales)! - Now using [@graphql-yoga](https://github.com/dotansimha/graphql-yoga) for GraphQL which has full support for [envelop](https://www.envelop.dev/) plugins.
+
+* [#1399](https://github.com/graphcommerce-org/graphcommerce/pull/1399) [`fb277d8e1`](https://github.com/graphcommerce-org/graphcommerce/commit/fb277d8e1e3612c5e9cf890a30d19cfd1ff70542) Thanks [@paales](https://github.com/paales)! - Added a new @graphcommerce/cli package to generate the mesh so it can be generated _inside_ the @graphcommerce/graphql-mesh package to allow for better future extensibility.
+
+- [#1399](https://github.com/graphcommerce-org/graphcommerce/pull/1399) [`da0ae7d02`](https://github.com/graphcommerce-org/graphcommerce/commit/da0ae7d0236e4908ba0bf0fa16656be516e841d4) Thanks [@paales](https://github.com/paales)! - Updated dependencies
+
+- Updated dependencies [[`da0ae7d02`](https://github.com/graphcommerce-org/graphcommerce/commit/da0ae7d0236e4908ba0bf0fa16656be516e841d4)]:
+  - @graphcommerce/framer-next-pages@3.1.6
+  - @graphcommerce/framer-scroller@2.1.6
+  - @graphcommerce/framer-utils@3.1.2
+  - @graphcommerce/image@3.1.5
+
+## 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

package/Form/Form.tsx

@@ -31,9 +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', {
-  shouldForwardProp: (prop) => prop !== 'contained',
+  shouldForwardProp: (prop) => prop !== 'contained' && prop !== 'sx',
 })<FormStyleProps>(styles)

package/LayoutOverlay/components/LayoutOverlay.tsx

@@ -1,5 +1,5 @@
 import { ScrollerProvider, ScrollSnapType } from '@graphcommerce/framer-scroller'
-import { SetOptional } from 'type-fest'
+import type { SetOptional } from 'type-fest'
 import { LayoutOverlayBase, LayoutOverlayBaseProps } from './LayoutOverlayBase'
 
 export type { LayoutOverlayVariant } from './LayoutOverlayBase'

package/LayoutOverlay/test/LayoutOverlayDemo.tsx

@@ -1,4 +1,3 @@
-import { useCallback } from 'react'
 import { useUrlQuery } from '../../useUrlQuery/useUrlQuery'
 import { LayoutOverlay, LayoutOverlayProps } from '../components/LayoutOverlay'
 
@@ -8,19 +7,7 @@ export type LayoutOverlayState = Omit<
 >
 
 export function useLayoutState() {
-  const [routerQuery, setRouterQuery] = useUrlQuery<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/Theme/themeDefaults.ts

@@ -1,7 +1,6 @@
 import { BreakpointsOptions, experimental_sx, SxProps, Theme } from '@mui/material'
 import { Shadows } from '@mui/material/styles/shadows'
-
-import { SetRequired } from 'type-fest'
+import type { SetRequired } from 'type-fest'
 
 // https://material.io/design/environment/elevation.html#default-elevations
 

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/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.5.0",
+  "version": "4.6.1",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -16,13 +16,13 @@
   "dependencies": {
     "@emotion/babel-preset-css-prop": "^11.2.0",
     "@emotion/cache": "^11.7.1",
-    "@emotion/react": "^11.8.2",
+    "@emotion/react": "^11.9.0",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",
-    "@graphcommerce/framer-next-pages": "^3.1.4",
-    "@graphcommerce/framer-scroller": "^2.1.3",
-    "@graphcommerce/framer-utils": "^3.1.1",
-    "@graphcommerce/image": "^3.1.2",
+    "@graphcommerce/framer-next-pages": "3.1.6",
+    "@graphcommerce/framer-scroller": "2.1.6",
+    "@graphcommerce/framer-utils": "3.1.2",
+    "@graphcommerce/image": "3.1.5",
     "react-is": "^18.0.0",
     "react-schemaorg": "^2.0.0",
     "schema-dts": "^1.1.0"
@@ -30,19 +30,19 @@
   "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.3",
-    "@graphcommerce/prettier-config-pwa": "^4.0.5",
+    "@graphcommerce/eslint-config-pwa": "^4.1.5",
+    "@graphcommerce/prettier-config-pwa": "^4.0.6",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
-    "@playwright/test": "^1.20.1",
+    "@playwright/test": "^1.21.1",
     "@types/react-is": "^17.0.3",
-    "type-fest": "2.12.1",
+    "type-fest": "^2.12.2",
     "typescript": "4.6.3"
   }
 }

package/useUrlQuery/useUrlQuery.tsx

@@ -1,19 +1,23 @@
-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) {
+export function useUrlQuery<T extends Record<string, string | null>>() {
   const { query, replace } = useRouter()
-  const queryState = builder(query as T)
 
   const setRouterQuery = useCallback(
-    (partialQuery: T) => {
-      if (JSON.stringify(queryState) === JSON.stringify(partialQuery)) return
+    (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: { ...queryState, ...partialQuery } }, undefined, { shallow: true })
+      replace({ query: newQuery }, undefined, { shallow: true })
     },
-    [queryState, replace],
+    [replace],
   )
 
-  return [queryState, setRouterQuery] as const
+  return [query as T, setRouterQuery] as const
 }