@graphcommerce/ecommerce-ui 9.0.0-canary.115 → 9.0.0-canary.117

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @graphcommerce/ecommerce-ui
 
+## 9.0.0-canary.117
+
+## 9.0.0-canary.116
+
 ## 9.0.0-canary.115
 
 ## 9.0.0-canary.114

package/components/FormComponents/ActionCardListForm.tsx

@@ -22,6 +22,7 @@ export type ActionCardListFormProps<A, F extends FieldValues = FieldValues> = Om
     render: React.FC<ActionCardItemRenderProps<A>>
   } & ActionCardRequireOptionSelection
 
+/** @public */
 export function ActionCardListForm<
   T extends ActionCardItemBase,
   F extends FieldValues = FieldValues,

package/components/FormComponents/CheckboxButtonGroup.tsx

@@ -28,6 +28,7 @@ export type CheckboxButtonGroupProps<T extends FieldValues> = {
   checkboxColor?: CheckboxProps['color']
 } & UseControllerProps<T>
 
+/** @public */
 export function CheckboxButtonGroup<TFieldValues extends FieldValues>(
   props: CheckboxButtonGroupProps<TFieldValues>,
 ): JSX.Element {

package/components/FormComponents/CheckboxElement.tsx

@@ -24,6 +24,7 @@ export type CheckboxElementProps<T extends FieldValues> = Omit<CheckboxProps, 'n
   formControl?: Omit<FormControlProps<'div'>, 'required' | 'error'>
 } & Omit<ControllerProps<T>, 'render'>
 
+/** @public */
 export function CheckboxElement<TFieldValues extends FieldValues>(
   props: CheckboxElementProps<TFieldValues>,
 ): JSX.Element {

package/components/FormComponents/EmailElement.tsx

@@ -7,6 +7,7 @@ import { TextFieldElement } from './TextFieldElement'
 
 export type EmailElementProps<T extends FieldValues> = TextFieldElementProps<T>
 
+/** @public */
 export function EmailElement<TFieldValues extends FieldValues>(
   props: EmailElementProps<TFieldValues>,
 ): JSX.Element {

package/components/FormComponents/InputBaseElement.tsx

@@ -0,0 +1,54 @@
+/* eslint-disable no-nested-ternary */
+import { FieldValues, UseControllerProps, useController } from '@graphcommerce/react-hook-form'
+import { i18n } from '@lingui/core'
+import { InputBase, InputBaseProps } from '@mui/material'
+import React from 'react'
+
+export type InputBaseElementProps<T extends FieldValues = FieldValues> = Omit<
+  InputBaseProps,
+  'name' | 'defaultValue'
+> & {
+  showValid?: boolean
+} & UseControllerProps<T>
+
+type InputBaseElementComponent = <TFieldValues extends FieldValues>(
+  props: InputBaseElementProps<TFieldValues> & { ref?: React.Ref<HTMLInputElement> },
+) => JSX.Element
+
+export const InputBaseElement = React.forwardRef<
+  HTMLInputElement,
+  InputBaseElementProps<FieldValues>
+>((props: InputBaseElementProps<FieldValues>, ref: React.Ref<HTMLInputElement>): JSX.Element => {
+  const {
+    type,
+    required,
+    name,
+    control,
+    defaultValue,
+    rules = {},
+    shouldUnregister,
+    showValid,
+    disabled,
+    ...rest
+  } = props
+
+  if (required && !rules?.required) {
+    rules.required = i18n._(/* i18n */ 'This field is required')
+  }
+
+  const {
+    field,
+    fieldState: { error },
+  } = useController({ name, control, rules, defaultValue, shouldUnregister, disabled })
+
+  return (
+    <InputBase
+      {...rest}
+      {...field}
+      ref={ref}
+      required={required}
+      type={type}
+      error={Boolean(error) || rest.error}
+    />
+  )
+}) as InputBaseElementComponent

package/components/FormComponents/MultiSelectElement.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import { IconSvg, iconClose } from '@graphcommerce/next-ui'
+import { iconClose, IconSvg } from '@graphcommerce/next-ui'
 import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
 import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
@@ -35,6 +35,7 @@ export type MultiSelectElementProps<T extends FieldValues> = Omit<SelectProps, '
 const ITEM_HEIGHT = 48
 const ITEM_PADDING_TOP = 8
 
+/** @public */
 export function MultiSelectElement<TFieldValues extends FieldValues>(
   props: MultiSelectElementProps<TFieldValues>,
 ): JSX.Element {

package/components/FormComponents/NumberFieldElement.tsx

@@ -28,6 +28,7 @@ const { withState } = extendableComponent<OwnerState, typeof componentName, type
   parts,
 )
 
+/** @public */
 export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElementProps<T>) {
   const {
     DownProps = {},

package/components/FormComponents/PasswordElement.tsx

@@ -1,4 +1,4 @@
-import { IconSvg, iconEye, iconEyeCrossed } from '@graphcommerce/next-ui'
+import { iconEye, iconEyeCrossed, IconSvg } from '@graphcommerce/next-ui'
 import type { FieldValues } from '@graphcommerce/react-hook-form'
 import type { IconButtonProps } from '@mui/material'
 import { IconButton, InputAdornment } from '@mui/material'
@@ -11,6 +11,7 @@ export type PasswordElementProps<T extends FieldValues> = TextFieldElementProps<
   iconColor?: IconButtonProps['color']
 }
 
+/** @public */
 export function PasswordElement<TFieldValues extends FieldValues>(
   props: PasswordElementProps<TFieldValues>,
 ): JSX.Element {

package/components/FormComponents/PasswordRepeatElement.tsx

@@ -8,6 +8,7 @@ export type PasswordRepeatElementProps<T extends FieldValues> = PasswordElementP
   passwordFieldName: PasswordElementProps<T>['name']
 }
 
+/** @public */
 export function PasswordRepeatElement<TFieldValues extends FieldValues>({
   passwordFieldName,
   ...rest

package/components/FormComponents/RadioButtonGroup.tsx

@@ -28,6 +28,7 @@ export type RadioButtonGroupProps<T extends FieldValues> = {
   row?: boolean
 } & UseControllerProps<T>
 
+/** @public */
 export function RadioButtonGroup<TFieldValues extends FieldValues>(
   props: RadioButtonGroupProps<TFieldValues>,
 ): JSX.Element {

package/components/FormComponents/SelectElement.tsx

@@ -11,23 +11,21 @@ export type SelectElementProps<T extends FieldValues, O extends OptionBase> = Om
   TextFieldProps,
   'name' | 'type' | 'onChange' | 'defaultValue'
 > & {
-  /** @deprecated Please use the rules props instead */
-  validation?: ControllerProps<T>['rules']
   options?: O[]
   type?: 'string' | 'number'
   onChange?: (value: string | number) => void
   showValid?: boolean
 } & Omit<ControllerProps<T>, 'render'>
 
+/** @public */
 export function SelectElement<TFieldValues extends FieldValues, O extends OptionBase>({
   name,
   required,
   options = [],
   type,
-  validation,
   control,
   defaultValue,
-  rules = validation ?? {},
+  rules = {},
   showValid,
   disabled,
   shouldUnregister,

package/components/FormComponents/SliderElement.tsx

@@ -10,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

@@ -7,6 +7,7 @@ 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,11 +1,12 @@
 import type { FieldValues } from '@graphcommerce/react-hook-form'
 import { phonePattern } from '@graphcommerce/react-hook-form'
-import { Trans, t } from '@lingui/macro'
+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

@@ -11,20 +11,17 @@ 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,

package/components/FormComponents/ToggleButtonGroup.tsx

@@ -24,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,

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/PreviewMode.tsx

@@ -1,12 +1,12 @@
 import type { PreviewData } from '@graphcommerce/graphql'
 import {
-  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,7 +16,7 @@ import { LightTooltip } from './LightTooltip'
 import { PreviewModeActions } from './PreviewModeActions'
 import { PreviewModeToolbar } from './PreviewModeToolbar'
 
-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))

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.115",
+  "version": "9.0.0-canary.117",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,12 +12,12 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.115",
-    "@graphcommerce/graphql": "^9.0.0-canary.115",
-    "@graphcommerce/next-ui": "^9.0.0-canary.115",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.115",
-    "@graphcommerce/react-hook-form": "^9.0.0-canary.115",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.115",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.117",
+    "@graphcommerce/graphql": "^9.0.0-canary.117",
+    "@graphcommerce/next-ui": "^9.0.0-canary.117",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.117",
+    "@graphcommerce/react-hook-form": "^9.0.0-canary.117",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.117",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/components/FormComponents/AutoCompleteElement.tsx

@@ -1,162 +0,0 @@
-/* eslint-disable @typescript-eslint/no-restricted-imports */
-import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
-import { useController } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
-import type { AutocompleteProps, TextFieldProps } from '@mui/material'
-import { Autocomplete, Checkbox, CircularProgress, TextField } 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<
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    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,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  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
-      ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        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}
-    />
-  )
-}