@graphcommerce/ecommerce-ui 9.0.0-canary.98 → 9.0.0

package/components/FormComponents/SliderElement.tsx

@@ -1,18 +1,8 @@
-import {
-  ControllerProps,
-  FieldError,
-  FieldValues,
-  useController,
-} from '@graphcommerce/react-hook-form'
+import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
-import {
-  FormControl,
-  FormControlProps,
-  FormHelperText,
-  FormLabel,
-  Slider,
-  SliderProps,
-} from '@mui/material'
+import type { FormControlProps, SliderProps } from '@mui/material'
+import { FormControl, FormHelperText, FormLabel, Slider } from '@mui/material'
 
 export type SliderElementProps<T extends FieldValues> = Omit<SliderProps, 'control'> & {
   label?: string
@@ -20,6 +10,7 @@ export type SliderElementProps<T extends FieldValues> = Omit<SliderProps, 'contr
   formControlProps?: FormControlProps
 } & Omit<ControllerProps<T>, 'render'>
 
+/** @public */
 export function SliderElement<TFieldValues extends FieldValues>({
   name,
   control,

package/components/FormComponents/SwitchElement.tsx

@@ -1,10 +1,13 @@
-import { FieldValues, ControllerProps, useController } from '@graphcommerce/react-hook-form'
-import { FormControlLabel, FormControlLabelProps, Switch } from '@mui/material'
+import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import { useController } from '@graphcommerce/react-hook-form'
+import type { FormControlLabelProps } from '@mui/material'
+import { FormControlLabel, Switch } from '@mui/material'
 
 type IProps = Omit<FormControlLabelProps, 'control'>
 
 export type SwitchElementProps<T extends FieldValues> = IProps & Omit<ControllerProps<T>, 'render'>
 
+/** @public */
 export function SwitchElement<TFieldValues extends FieldValues>({
   name,
   control,

package/components/FormComponents/TelephoneElement.tsx

@@ -1,9 +1,12 @@
-import { FieldValues, phonePattern } from '@graphcommerce/react-hook-form'
-import { Trans, t } from '@lingui/macro'
-import { TextFieldElement, TextFieldElementProps } from './TextFieldElement'
+import type { FieldValues } from '@graphcommerce/react-hook-form'
+import { phonePattern } from '@graphcommerce/react-hook-form'
+import { t, Trans } from '@lingui/macro'
+import type { TextFieldElementProps } from './TextFieldElement'
+import { TextFieldElement } from './TextFieldElement'
 
 export type TelephoneElementProps<T extends FieldValues> = TextFieldElementProps<T>
 
+/** @public */
 export function TelephoneElement<TFieldValues extends FieldValues>(
   props: TelephoneElementProps<TFieldValues>,
 ): JSX.Element {

package/components/FormComponents/TextFieldElement.tsx

@@ -1,32 +1,27 @@
 /* eslint-disable no-nested-ternary */
 import { InputCheckmark } from '@graphcommerce/next-ui'
-import {
-  FieldValues,
-  UseControllerProps,
-  emailPattern,
-  useController,
-} from '@graphcommerce/react-hook-form'
+import type { FieldValues, UseControllerProps } from '@graphcommerce/react-hook-form'
+import { emailPattern, useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
-import { TextField, TextFieldProps } from '@mui/material'
+import type { TextFieldProps } from '@mui/material'
+import { TextField, useForkRef } from '@mui/material'
+import React, { useState } from 'react'
 
 export type TextFieldElementProps<T extends FieldValues = FieldValues> = Omit<
   TextFieldProps,
   'name' | 'defaultValue'
 > & {
-  /** @deprecated Please use the rules props instead */
-  validation?: UseControllerProps<T>['rules']
-
   showValid?: boolean
 } & UseControllerProps<T>
 
+/** @public */
 export function TextFieldElement<TFieldValues extends FieldValues>({
-  validation = {},
   type,
   required,
   name,
   control,
   defaultValue,
-  rules = validation,
+  rules = {},
   shouldUnregister,
   showValid,
   disabled,
@@ -48,20 +43,34 @@ 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)
       }}
-      inputRef={ref}
+      inputRef={useForkRef(ref, rest.inputRef)}
       required={required}
       type={type}
       error={Boolean(error) || rest.error}
       helperText={error ? error.message : rest.helperText}
+      InputLabelProps={{ ...rest.InputLabelProps, shrink }}
       InputProps={{
         ...rest.InputProps,
         endAdornment:

package/components/FormComponents/ToggleButtonGroup.tsx

@@ -1,21 +1,15 @@
-import {
-  ControllerProps,
-  FieldError,
-  FieldValues,
-  useController,
-} from '@graphcommerce/react-hook-form'
+import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
+import type { FormLabelProps, ToggleButtonGroupProps, ToggleButtonProps } from '@mui/material'
 import {
   FormControl,
   FormHelperText,
   FormLabel,
-  FormLabelProps,
   ToggleButton,
   ToggleButtonGroup,
-  ToggleButtonGroupProps,
-  ToggleButtonProps,
 } from '@mui/material'
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 
 type SingleToggleButtonProps = Omit<ToggleButtonProps, 'value' | 'children'> & {
   id: number | string
@@ -30,6 +24,7 @@ export type ToggleButtonGroupElementProps<T extends FieldValues> = ToggleButtonG
   helperText?: string
 } & Omit<ControllerProps<T>, 'render'>
 
+/** @public */
 export function ToggleButtonGroupElement<TFieldValues extends FieldValues = FieldValues>({
   name,
   control,
@@ -87,9 +82,9 @@ export function ToggleButtonGroupElement<TFieldValues extends FieldValues = Fiel
           }
         }}
       >
-        {options.map(({ label, id, ...toggleProps }) => (
+        {options.map(({ label: labelVal, id, ...toggleProps }) => (
           <ToggleButton value={id} {...toggleProps} key={id}>
-            {label}
+            {labelVal}
           </ToggleButton>
         ))}
       </ToggleButtonGroup>

package/components/FormComponents/index.ts

@@ -1,5 +1,4 @@
 export * from './ActionCardListForm'
-export * from './AutoCompleteElement'
 export * from './CheckboxButtonGroup'
 export * from './CheckboxElement'
 export * from './EmailElement'
@@ -14,3 +13,4 @@ export * from './SwitchElement'
 export * from './TelephoneElement'
 export * from './TextFieldElement'
 export * from './ToggleButtonGroup'
+export * from './InputBaseElement'

package/components/PreviewMode/LightTooltip.tsx

@@ -1,4 +1,4 @@
-import { styled, Tooltip, tooltipClasses } from '@mui/material'
+import { Tooltip, styled, tooltipClasses } from '@mui/material'
 
 export const LightTooltip = styled<typeof Tooltip>(({ className, ...props }) => (
   <Tooltip {...props} classes={{ popper: className }} />

package/components/PreviewMode/PreviewMode.tsx

@@ -1,13 +1,12 @@
-import { PreviewData } from '@graphcommerce/graphql'
+import type { PreviewData } from '@graphcommerce/graphql'
 import {
-  Button,
-  IconSvg,
-  MessageSnackbar,
   iconChevronRight,
   iconClose,
   iconContrast,
   iconInfo,
   iconRefresh,
+  IconSvg,
+  MessageSnackbar,
 } from '@graphcommerce/next-ui'
 import { FormAutoSubmit, FormPersist, FormProvider, useForm } from '@graphcommerce/react-hook-form'
 import { Box, IconButton } from '@mui/material'
@@ -16,9 +15,8 @@ import { TextFieldElement } from '../FormComponents'
 import { LightTooltip } from './LightTooltip'
 import { PreviewModeActions } from './PreviewModeActions'
 import { PreviewModeToolbar } from './PreviewModeToolbar'
-import { previewModeDefaults } from './previewModeDefaults'
 
-export function getPreviewUrl() {
+function getPreviewUrl() {
   const url = new URL(window.location.href)
   url.pathname = '/api/preview'
   ;[...url.searchParams.entries()].forEach(([key]) => url.searchParams.delete(key))
@@ -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()
@@ -51,6 +47,7 @@ function PreviewModeEnabled() {
   const revalidateHandler = form.handleSubmit((formValues) => {
     const url = getPreviewUrl()
     Object.entries(formValues).forEach(([key, value]) => {
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
       url.searchParams.append(key, `${value}`)
     })
     url.searchParams.append('action', 'revalidate')
@@ -102,7 +99,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/components/PreviewMode/PreviewModeActions.tsx

@@ -1,6 +1,6 @@
 export type PreviewModeActionsProps = Record<string, unknown>
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function PreviewModeActions(props: PreviewModeActionsProps) {
-  const {} = props
-  return <></>
+  return null
 }

package/components/PreviewMode/PreviewModeToolbar.tsx

@@ -1,6 +1,6 @@
 export type PreviewModeToolbarProps = Record<string, unknown>
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function PreviewModeToolbar(props: PreviewModeToolbarProps) {
-  const {} = props
   return null
 }

package/components/PreviewMode/previewModeDefaults.ts

@@ -1,4 +1,4 @@
-import { PreviewData } from '@graphcommerce/graphql'
+import type { PreviewData } from '@graphcommerce/graphql'
 
 export function previewModeDefaults(): PreviewData {
   return {}

package/components/PreviewMode/usePreviewModeForm.ts

@@ -1,4 +1,4 @@
-import { PreviewData } from '@graphcommerce/graphql'
+import type { PreviewData } from '@graphcommerce/graphql'
 import { useFormContext } from '@graphcommerce/react-hook-form'
 
 export function usePreviewModeForm() {

package/components/WaitForQueries/WaitForQueries.tsx

@@ -1,19 +1,16 @@
-import { QueryResult } from '@graphcommerce/graphql'
+import type { QueryResult } from '@graphcommerce/graphql'
 import { useIsSSR } from '@graphcommerce/next-ui'
 import React from 'react'
 
 export type WaitForQueriesProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   waitFor: QueryResult<any, any> | boolean | (QueryResult<any, any> | boolean)[] | undefined
-  /**
-   * @deprecated Will be automatically correct.
-   */
-  noSsr?: boolean
   children: React.ReactNode
   fallback?: React.ReactNode
 }
 
 /** Shows the fallback during: SSR, Hydration and Query Loading. */
-export const WaitForQueries = (props: WaitForQueriesProps) => {
+export function WaitForQueries(props: WaitForQueriesProps) {
   const { waitFor, fallback, children } = props
 
   const mounted = !useIsSSR()

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.98",
+  "version": "9.0.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,17 +12,17 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.98",
-    "@graphcommerce/graphql": "^9.0.0-canary.98",
-    "@graphcommerce/next-ui": "^9.0.0-canary.98",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.98",
-    "@graphcommerce/react-hook-form": "^9.0.0-canary.98",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.98",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0",
+    "@graphcommerce/graphql": "^9.0.0",
+    "@graphcommerce/next-ui": "^9.0.0",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0",
+    "@graphcommerce/react-hook-form": "^9.0.0",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",
     "@mui/material": "^5.10.16",
-    "framer-motion": "^10.0.0",
+    "framer-motion": "^11.0.0",
     "next": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

package/route/preview.ts

@@ -1,5 +1,5 @@
-import { PreviewData } from '@graphcommerce/graphql'
-import { NextApiRequest, NextApiResponse } from 'next'
+import type { PreviewData } from '@graphcommerce/graphql'
+import type { NextApiRequest, NextApiResponse } from 'next'
 import { previewModeDefaults } from '../components/PreviewMode/previewModeDefaults'
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {

package/components/FormComponents/AutoCompleteElement.tsx

@@ -1,169 +0,0 @@
-/* eslint-disable @typescript-eslint/no-restricted-imports */
-import {
-  Controller,
-  ControllerProps,
-  FieldValues,
-  useController,
-} from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
-import {
-  Autocomplete,
-  AutocompleteProps,
-  Checkbox,
-  TextField,
-  TextFieldProps,
-  CircularProgress,
-} from '@mui/material'
-
-export type AutocompleteElementProps<
-  F extends FieldValues,
-  T,
-  M extends boolean | undefined,
-  D extends boolean | undefined,
-> = {
-  options: T[]
-  loading?: boolean
-  multiple?: M
-  matchId?: boolean
-  required?: boolean
-  label?: TextFieldProps['label']
-  showCheckbox?: boolean
-  autocompleteProps?: Omit<
-    AutocompleteProps<T, M, D, any>,
-    'name' | 'options' | 'loading' | 'renderInput'
-  >
-  textFieldProps?: Omit<TextFieldProps, 'name' | 'required' | 'label'>
-} & ControllerProps<F>
-
-type AutoDefault = {
-  id: string | number // must keep id in case of keepObject
-  label: string
-}
-
-export function AutocompleteElement<TFieldValues extends FieldValues>({
-  textFieldProps,
-  autocompleteProps,
-  name,
-  control,
-  options,
-  loading,
-  showCheckbox,
-  rules,
-  required,
-  multiple,
-  matchId,
-  label,
-  disabled,
-  defaultValue,
-  shouldUnregister,
-}: AutocompleteElementProps<
-  TFieldValues,
-  AutoDefault | string | any,
-  boolean | undefined,
-  boolean | undefined
->) {
-  const validationRules: ControllerProps<TFieldValues>['rules'] = {
-    ...rules,
-    ...(required && {
-      required: rules?.required || i18n._(/* i18n */ 'This field is required'),
-    }),
-  }
-
-  const {
-    field: { onChange, onBlur, value, ...fieldRest },
-    fieldState: { error },
-  } = useController({
-    name,
-    control,
-    rules: validationRules,
-    defaultValue,
-    disabled,
-    shouldUnregister,
-  })
-
-  const values = Array.isArray(value) ? (value as (typeof value)[]) : [value]
-  let currentValue = multiple ? value || [] : value || null
-  if (matchId) {
-    currentValue = multiple
-      ? values.map((i: any) => options.find((j) => (j.id || j) === i))
-      : options.find((i) => (i.id || i) === value) || null
-  }
-
-  return (
-    <Autocomplete
-      {...autocompleteProps}
-      value={currentValue}
-      loading={loading}
-      multiple={multiple}
-      options={options}
-      disableCloseOnSelect={
-        typeof autocompleteProps?.disableCloseOnSelect === 'boolean'
-          ? autocompleteProps.disableCloseOnSelect
-          : !!multiple
-      }
-      isOptionEqualToValue={
-        autocompleteProps?.isOptionEqualToValue
-          ? autocompleteProps.isOptionEqualToValue
-          : (option, v) => (v ? option.id === (v?.id || v) : false)
-      }
-      getOptionLabel={
-        autocompleteProps?.getOptionLabel
-          ? autocompleteProps.getOptionLabel
-          : (option) => `${option?.label || option}`
-      }
-      onChange={(event, value, reason, details) => {
-        let changedVal = value
-        if (matchId) {
-          changedVal = Array.isArray(value) ? value.map((i: any) => i?.id || i) : value?.id || value
-        }
-        onChange(changedVal)
-        if (autocompleteProps?.onChange) {
-          autocompleteProps.onChange(event, value, reason, details)
-        }
-      }}
-      renderOption={
-        autocompleteProps?.renderOption ??
-        (showCheckbox
-          ? (props, option, { selected }) => (
-              <li {...props}>
-                <Checkbox sx={{ marginRight: 1 }} checked={selected} />
-                {autocompleteProps?.getOptionLabel?.(option) || option.label || option}
-              </li>
-            )
-          : undefined)
-      }
-      onBlur={(event) => {
-        onBlur()
-        if (typeof autocompleteProps?.onBlur === 'function') {
-          autocompleteProps.onBlur(event)
-        }
-      }}
-      renderInput={(params) => (
-        <TextField
-          name={name}
-          required={rules?.required ? true : required}
-          label={label}
-          {...textFieldProps}
-          {...params}
-          error={!!error}
-          InputProps={{
-            ...params.InputProps,
-            endAdornment: (
-              <>
-                {loading ? <CircularProgress color='inherit' size={20} /> : null}
-                {params.InputProps.endAdornment}
-              </>
-            ),
-            ...textFieldProps?.InputProps,
-          }}
-          inputProps={{
-            ...params.inputProps,
-            ...textFieldProps?.inputProps,
-          }}
-          helperText={error ? error.message : textFieldProps?.helperText}
-        />
-      )}
-      {...fieldRest}
-    />
-  )
-}