@graphcommerce/ecommerce-ui 9.0.0-canary.100 → 9.0.0-canary.101

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @graphcommerce/ecommerce-ui
 
+## 9.0.0-canary.101
+
+### Patch Changes
+
+- [#2380](https://github.com/graphcommerce-org/graphcommerce/pull/2380) [`c17e5f1`](https://github.com/graphcommerce-org/graphcommerce/commit/c17e5f1cf9fb291b9bbf1fca0620c2721dceb331) - Solve issue: Warning: Cannot update a component (`FormAutoSubmitBase`) while rendering a different component (`ActionCardListForm`). ([@paales](https://github.com/paales))
+
 ## 9.0.0-canary.100
 
 ## 9.0.0-canary.99

package/Config.graphqls

@@ -4,7 +4,13 @@ enum WebsitePermissions {
   # DISABLED will be implemented later
 }
 
+"""
+Permissions input
+"""
 input GraphCommercePermissions {
+  """
+  Allows the option to require login or completely disable the site.
+  """
   website: WebsitePermissions
 }
 

package/components/FormComponents/ActionCardListForm.tsx

@@ -1,6 +1,6 @@
 import { ActionCardList, ActionCardListProps, ActionCardProps } from '@graphcommerce/next-ui'
 import { ControllerProps, FieldValues, useController } from '@graphcommerce/react-hook-form'
-import React, { MouseEventHandler } from 'react'
+import React, { MouseEventHandler, useCallback } from 'react'
 
 export type ActionCardItemBase = Pick<ActionCardProps, 'value'>
 
@@ -40,11 +40,14 @@ export function ActionCardListForm<
   } = props
   const RenderItem = render as React.FC<ActionCardItemRenderProps<ActionCardItemBase>>
 
-  function onSelect(itemValue: unknown, selectValues: unknown) {
-    return multiple
-      ? Array.isArray(selectValues) && selectValues.some((selectValue) => selectValue === itemValue)
-      : selectValues === itemValue
-  }
+  const onSelect = useCallback(
+    (itemValue: unknown, selectValues: unknown) =>
+      multiple
+        ? Array.isArray(selectValues) &&
+          selectValues.some((selectValue) => selectValue === itemValue)
+        : selectValues === itemValue,
+    [multiple],
+  )
 
   const {
     field: { onChange, value, ref },
@@ -60,6 +63,14 @@ export function ActionCardListForm<
     shouldUnregister,
   })
 
+  const handleReset = useCallback(
+    (e: React.MouseEvent<HTMLElement>) => {
+      e.preventDefault()
+      if (!requireOptionSelection) onChange(null)
+    },
+    [onChange, requireOptionSelection],
+  )
+
   return (
     <ActionCardList
       {...other}
@@ -67,7 +78,7 @@ export function ActionCardListForm<
       required={required}
       value={value}
       ref={ref}
-      onChange={(_, incomming) => onChange(incomming)}
+      onChange={(_, incoming) => onChange(incoming)}
       error={formState.isSubmitted && !!fieldState.error}
       errorMessage={fieldState.error?.message}
     >
@@ -77,10 +88,7 @@ export function ActionCardListForm<
           key={`${item.value}`}
           value={item.value}
           selected={onSelect(item.value, value)}
-          onReset={(e) => {
-            e.preventDefault()
-            if (!requireOptionSelection) onChange(null)
-          }}
+          onReset={handleReset}
         />
       ))}
     </ActionCardList>

package/components/FormComponents/TextFieldElement.tsx

@@ -8,6 +8,7 @@ import {
 } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { TextField, TextFieldProps } from '@mui/material'
+import React, { useState } from 'react'
 
 export type TextFieldElementProps<T extends FieldValues = FieldValues> = Omit<
   TextFieldProps,
@@ -48,11 +49,24 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
     fieldState: { error },
   } = useController({ name, control, rules, defaultValue, shouldUnregister, disabled })
 
+  // https://stackoverflow.com/questions/76830737/chrome-autofill-causes-textbox-collision-for-textfield-label-and-value
+  const [hasAutofill, setHasAutofill] = useState(false)
+  const shrink = hasAutofill || rest.InputLabelProps?.shrink || Boolean(value)
+  const onAnimationStart = (e: React.AnimationEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    if (e.target instanceof HTMLElement) {
+      const autofilled = !!e.target.matches('*:-webkit-autofill')
+      if (e.animationName === 'mui-auto-fill') setHasAutofill(autofilled)
+      if (e.animationName === 'mui-auto-fill-cancel') setHasAutofill(autofilled)
+    }
+    return rest.inputProps?.onAnimationStart?.(e)
+  }
+
   return (
     <TextField
       {...rest}
       {...field}
       value={value}
+      inputProps={{ ...rest.inputProps, onAnimationStart }}
       onChange={(ev) => {
         onChange(type === 'number' && ev.target.value ? Number(ev.target.value) : ev.target.value)
         rest.onChange?.(ev)
@@ -62,6 +76,7 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
       type={type}
       error={Boolean(error) || rest.error}
       helperText={error ? error.message : rest.helperText}
+      InputLabelProps={{ ...rest.InputLabelProps, shrink }}
       InputProps={{
         ...rest.InputProps,
         endAdornment:

package/components/PreviewMode/PreviewMode.tsx

@@ -1,6 +1,5 @@
 import { PreviewData } from '@graphcommerce/graphql'
 import {
-  Button,
   IconSvg,
   MessageSnackbar,
   iconChevronRight,
@@ -16,7 +15,6 @@ import { TextFieldElement } from '../FormComponents'
 import { LightTooltip } from './LightTooltip'
 import { PreviewModeActions } from './PreviewModeActions'
 import { PreviewModeToolbar } from './PreviewModeToolbar'
-import { previewModeDefaults } from './previewModeDefaults'
 
 export function getPreviewUrl() {
   const url = new URL(window.location.href)
@@ -26,9 +24,7 @@ export function getPreviewUrl() {
 }
 
 function PreviewModeEnabled() {
-  const form = useForm<{ secret: string; previewData: PreviewData }>({
-    defaultValues: { previewData: previewModeDefaults() },
-  })
+  const form = useForm<{ secret: string; previewData: PreviewData }>({})
 
   const submit = form.handleSubmit((formValues) => {
     const url = getPreviewUrl()
@@ -102,7 +98,14 @@ function PreviewModeEnabled() {
 }
 
 function PreviewModeDisabled() {
-  const form = useForm<{ secret: string }>({})
+  const form = useForm<{ secret: string }>({
+    defaultValues: {
+      secret:
+        process.env.NODE_ENV === 'development'
+          ? (import.meta.graphCommerce.previewSecret ?? '')
+          : '',
+    },
+  })
 
   const submit = form.handleSubmit((formValues) => {
     const url = getPreviewUrl()

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/ecommerce-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.100",
+  "version": "9.0.0-canary.101",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,12 +12,12 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.100",
-    "@graphcommerce/graphql": "^9.0.0-canary.100",
-    "@graphcommerce/next-ui": "^9.0.0-canary.100",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.100",
-    "@graphcommerce/react-hook-form": "^9.0.0-canary.100",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.100",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.101",
+    "@graphcommerce/graphql": "^9.0.0-canary.101",
+    "@graphcommerce/next-ui": "^9.0.0-canary.101",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.101",
+    "@graphcommerce/react-hook-form": "^9.0.0-canary.101",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.101",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",