@graphcommerce/next-ui 4.5.1 → 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,21 @@
 # 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

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/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/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.1",
+  "version": "4.6.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -20,9 +20,9 @@
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",
     "@graphcommerce/framer-next-pages": "3.1.5",
-    "@graphcommerce/framer-scroller": "2.1.4",
+    "@graphcommerce/framer-scroller": "2.1.5",
     "@graphcommerce/framer-utils": "3.1.1",
-    "@graphcommerce/image": "3.1.3",
+    "@graphcommerce/image": "3.1.4",
     "react-is": "^18.0.0",
     "react-schemaorg": "^2.0.0",
     "schema-dts": "^1.1.0"

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
 }