@graphcommerce/ecommerce-ui 9.1.0-canary.18 → 9.1.0-canary.20

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @graphcommerce/ecommerce-ui
 
+## 9.1.0-canary.20
+
+## 9.1.0-canary.19
+
+### Patch Changes
+
+- [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`7c7d6e4`](https://github.com/graphcommerce-org/graphcommerce/commit/7c7d6e4976d263f4139ce1de2caf47e7f49a2bf8) - Solve issue where an individual item in the ActionCardListForm couldn't be disabed. Resulting in configurable options on the product page to be selectable while they shouldn't be. ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.18
 
 ## 9.1.0-canary.17

package/components/FormComponents/ActionCardListForm.tsx

@@ -93,7 +93,7 @@ export function ActionCardListForm<
           value={item.value}
           selected={onSelect(item.value, value)}
           onReset={handleReset}
-          disabled={disabled}
+          disabled={disabled || (item as { disabled?: boolean }).disabled}
         />
       ))}
     </ActionCardList>

package/components/FormComponents/TextFieldElement.tsx

@@ -8,15 +8,43 @@ import { TextField, useForkRef } from '@mui/material'
 import React, { useState } from 'react'
 import type { BaseControllerProps, FieldElementProps } from './types'
 
-type ShowValidProps = { showValid?: boolean }
+type InternalProps = {
+  showValid?: boolean
+  /** Cast all values as a string instead of a string/number/date depending on the input type. */
+  asString?: boolean
+}
 
 export type TextFieldElementProps<TFieldValues extends FieldValues = FieldValues> =
-  FieldElementProps<TFieldValues, TextFieldProps> & ShowValidProps
+  FieldElementProps<TFieldValues, TextFieldProps> & InternalProps
 
 type TextFieldElementComponent = <TFieldValues extends FieldValues>(
   props: TextFieldElementProps<TFieldValues>,
 ) => React.ReactNode
 
+function toValue(incomingValue: unknown, type: React.HTMLInputTypeAttribute) {
+  try {
+    let value = incomingValue
+    if (!value) return value
+
+    if (typeof value === 'number') return value.toString()
+
+    if (type === 'time' || type === 'datetime-local' || type === 'date') {
+      if (typeof value === 'string') value = new Date(value)
+      if (!(value instanceof Date)) return value
+
+      const [datePart, timePart] = value.toISOString().replace('Z', '').split('T')
+
+      if (type === 'time') return timePart
+      if (type === 'date') return datePart
+      if (type === 'datetime-local') return value.toISOString().replace('Z', '')
+    }
+    return value
+  } catch (e) {
+    console.error(e, incomingValue, type)
+    return incomingValue
+  }
+}
+
 /** @public */
 function TextFieldElementBase(props: TextFieldElementProps): JSX.Element {
   const {
@@ -26,11 +54,12 @@ function TextFieldElementBase(props: TextFieldElementProps): JSX.Element {
     rules = {},
     shouldUnregister,
     disabled: disabledField,
-    type,
+    type = 'text',
     required,
     showValid,
+    asString = false,
     ...rest
-  } = props as TextFieldProps & ShowValidProps & BaseControllerProps
+  } = props as TextFieldProps & InternalProps & BaseControllerProps
 
   if (required && !rules.required) {
     rules.required = i18n._(/* i18n */ 'This field is required')
@@ -73,10 +102,26 @@ function TextFieldElementBase(props: TextFieldElementProps): JSX.Element {
       onBlur={onBlur}
       name={name}
       disabled={disabled}
-      value={value}
+      value={toValue(value, type)}
       inputProps={{ ...rest.inputProps, onAnimationStart }}
       onChange={(ev) => {
-        onChange(type === 'number' && ev.target.value ? Number(ev.target.value) : ev.target.value)
+        let changeValue: string | number | Date = ev.target.value
+
+        if (ev.target instanceof HTMLInputElement) {
+          if (type === 'number' || typeof changeValue === 'number') {
+            changeValue = ev.target.valueAsNumber
+          } else if (type === 'datetime-local') {
+            changeValue = new Date(`${changeValue.replace('T', ' ')}.000Z`)
+          } else if (type === 'date') {
+            changeValue = ev.target.valueAsDate ?? ''
+          } else if (type === 'time') {
+            changeValue = new Date(`01-01-1970 ${changeValue}.000Z`)
+          }
+        }
+
+        if (asString) changeValue = changeValue.toString()
+
+        onChange(changeValue)
         rest.onChange?.(ev)
       }}
       inputRef={useForkRef(ref, rest.inputRef)}
@@ -88,7 +133,7 @@ function TextFieldElementBase(props: TextFieldElementProps): JSX.Element {
       InputProps={{
         ...rest.InputProps,
         endAdornment:
-          showValid && value && !error ? (
+          showValid && Boolean(value) && !error ? (
             <InputCheckmark show={!error} />
           ) : (
             rest.InputProps?.endAdornment

package/package.json

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