@graphcommerce/next-ui 8.0.6-canary.0 → 8.0.6-canary.2

package/ActionCard/ActionCardListForm.tsx

@@ -1,5 +1,10 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { Controller, ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import {
+  Controller,
+  ControllerProps,
+  FieldValues,
+  useController,
+} from '@graphcommerce/react-hook-form'
 import React, { MouseEventHandler } from 'react'
 import { ActionCardProps } from './ActionCard'
 import { ActionCardList, ActionCardListProps } from './ActionCardList'
@@ -43,38 +48,41 @@ export function ActionCardListForm<
       : selectValues === itemValue
   }
 
+  const {
+    field: { onChange, value, ref },
+    fieldState,
+    formState,
+  } = useController({
+    ...props,
+    control,
+    name,
+    defaultValue,
+    rules: { required: errorMessage || required, ...rules },
+  })
+
   return (
-    <Controller
-      {...props}
-      control={control}
-      name={name}
-      defaultValue={defaultValue}
-      rules={{ required: errorMessage || required, ...rules }}
-      render={({ field: { onChange, value, ref }, fieldState, formState }) => (
-        <ActionCardList
-          {...other}
-          multiple={multiple}
-          required={required}
-          value={value}
-          ref={ref}
-          onChange={(_, incomming) => onChange(incomming)}
-          error={formState.isSubmitted && !!fieldState.error}
-          errorMessage={fieldState.error?.message}
-        >
-          {items.map((item) => (
-            <RenderItem
-              {...item}
-              key={item.value ?? ''}
-              value={item.value}
-              selected={onSelect(item.value, value)}
-              onReset={(e) => {
-                e.preventDefault()
-                onChange(null)
-              }}
-            />
-          ))}
-        </ActionCardList>
-      )}
-    />
+    <ActionCardList
+      {...other}
+      multiple={multiple}
+      required={required}
+      value={value}
+      ref={ref}
+      onChange={(_, incomming) => onChange(incomming)}
+      error={formState.isSubmitted && !!fieldState.error}
+      errorMessage={fieldState.error?.message}
+    >
+      {items.map((item) => (
+        <RenderItem
+          {...item}
+          key={item.value ?? ''}
+          value={item.value}
+          selected={onSelect(item.value, value)}
+          onReset={(e) => {
+            e.preventDefault()
+            onChange(null)
+          }}
+        />
+      ))}
+    </ActionCardList>
   )
 }

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 8.0.6-canary.2
+
+### Patch Changes
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`43bd04a`](https://github.com/graphcommerce-org/graphcommerce/commit/43bd04a777c5800cc7e01bee1e123a5aad82f194) - Added useIsSSR hook that will properly resolve when the page is rendered on the server and on first render, but will return false when a component is rendered on the client directly.
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`0767bc4`](https://github.com/graphcommerce-org/graphcommerce/commit/0767bc40f7b596209f24ca4e745ff0441f3275c9) - Upgrade input components to no longer use muiRegister, which improves INP scores
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+## 8.0.6-canary.1
+
 ## 8.0.6-canary.0
 
 ### Patch Changes

package/hooks/index.ts

@@ -5,4 +5,5 @@ export * from './useNumberFormat'
 export * from './useMemoObject'
 export * from './useStorefrontConfig'
 export * from './useUrlQuery'
+export * from './useSsr'
 export * from './useLocale'

package/hooks/useSsr.ts

@@ -0,0 +1,11 @@
+import { useSyncExternalStore } from 'react'
+
+const emptySubscribe = () => () => {}
+
+export function useIsSSR() {
+  return useSyncExternalStore(
+    emptySubscribe,
+    () => false,
+    () => true,
+  )
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.0.6-canary.0",
+  "version": "8.0.6-canary.2",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -25,14 +25,14 @@
     "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.0.6-canary.0",
-    "@graphcommerce/framer-next-pages": "^8.0.6-canary.0",
-    "@graphcommerce/framer-scroller": "^8.0.6-canary.0",
-    "@graphcommerce/framer-utils": "^8.0.6-canary.0",
-    "@graphcommerce/image": "^8.0.6-canary.0",
-    "@graphcommerce/lingui-next": "^8.0.6-canary.0",
-    "@graphcommerce/prettier-config-pwa": "^8.0.6-canary.0",
-    "@graphcommerce/typescript-config-pwa": "^8.0.6-canary.0",
+    "@graphcommerce/eslint-config-pwa": "^8.0.6-canary.2",
+    "@graphcommerce/framer-next-pages": "^8.0.6-canary.2",
+    "@graphcommerce/framer-scroller": "^8.0.6-canary.2",
+    "@graphcommerce/framer-utils": "^8.0.6-canary.2",
+    "@graphcommerce/image": "^8.0.6-canary.2",
+    "@graphcommerce/lingui-next": "^8.0.6-canary.2",
+    "@graphcommerce/prettier-config-pwa": "^8.0.6-canary.2",
+    "@graphcommerce/typescript-config-pwa": "^8.0.6-canary.2",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",