@graphcommerce/next-ui 9.0.0-canary.79 → 9.0.0-canary.80

package/ActionCard/ActionCard.tsx

@@ -213,7 +213,7 @@ export function ActionCard(props: ActionCardProps) {
             backgroundColor: theme.palette.background.paper,
             boxShadow: `inset 0 0 0 1px ${theme.palette.divider}`,
             '&:not(:last-of-type)': {
-              marginBottom: '-1px',
+              marginBottom: '-2px',
             },
             '&.layoutList': {
               borderRadius: 0,
@@ -251,7 +251,7 @@ export function ActionCard(props: ActionCardProps) {
               borderColor: 'transparent',
               boxShadow: `inset 0 0 0 2px ${theme.palette[color].main}`,
             },
-            '&.selected:focus': {
+            '&.selected:focus, &.error:focus': {
               borderColor: 'transparent',
               boxShadow: `inset 0 0 0 2px ${theme.palette[color].main}, 0 0 0 4px ${alpha(
                 theme.palette[color].main,
@@ -266,12 +266,15 @@ export function ActionCard(props: ActionCardProps) {
             },
 
             '&.error': {
-              boxShadow: `0 0 0 2px ${theme.palette.error.main}`,
+              boxShadow: `inset 0 0 0 2px ${theme.palette.error.main}`,
             },
           },
           '&.selected': {
             zIndex: 1,
           },
+          '&:focus, &.selected:focus, &.error:focus': {
+            zIndex: 2,
+          },
           '&.disabled': {
             background: theme.palette.action.disabledBackground,
             opacity: theme.palette.action.disabledOpacity,

package/ActionCard/ActionCardLayout.tsx

@@ -6,7 +6,7 @@ import { ActionCardProps } from './ActionCard'
 export type ActionCardLayoutProps = {
   children?: React.ReactNode
 } & Pick<ActionCardProps, 'layout'> &
-  Pick<BoxProps, 'sx' | 'className'>
+  Pick<BoxProps, 'sx' | 'className' | 'tabIndex'>
 
 const parts = ['root'] as const
 const name = 'ActionCardLayout'

package/ActionCard/ActionCardList.tsx

@@ -138,8 +138,8 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
     const classes = withState({ size, color, variant, layout })
 
     return (
-      <div ref={ref}>
-        <ActionCardLayout sx={sx} className={classes.root} layout={layout}>
+      <div>
+        <ActionCardLayout sx={sx} className={classes.root} layout={layout} ref={ref} tabIndex={0}>
           {childActionCards.map((child, index) => {
             if (collapse && Boolean(value) && !isValueSelected(child.props.value, value))
               return null

package/ActionCard/index.ts

@@ -2,4 +2,3 @@ export * from './ActionCard'
 export * from './ActionCardAccordion'
 export * from './ActionCardLayout'
 export * from './ActionCardList'
-export * from './ActionCardListForm'

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 9.0.0-canary.80
+
+### Patch Changes
+
+- [#2341](https://github.com/graphcommerce-org/graphcommerce/pull/2341) [`c57614d`](https://github.com/graphcommerce-org/graphcommerce/commit/c57614d47675cec2a0bf290371f11441495e10fe) - ActionCardList can now recieve focus, allowing form submissions to scroll to the field. Focussed fields now are now highlighted even when there is an error. ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
 ## 9.0.0-canary.79
 
 ### Patch Changes

package/package.json

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

package/ActionCard/ActionCardListForm.tsx

@@ -1,88 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import {
-  Controller,
-  ControllerProps,
-  FieldValues,
-  useController,
-} from '@graphcommerce/react-hook-form'
-import React, { MouseEventHandler } from 'react'
-import { ActionCardProps } from './ActionCard'
-import { ActionCardList, ActionCardListProps } from './ActionCardList'
-
-export type ActionCardItemBase = Pick<ActionCardProps, 'value'>
-
-export type ActionCardItemRenderProps<T> = ActionCardProps & {
-  onReset: MouseEventHandler<HTMLAnchorElement> & MouseEventHandler<HTMLSpanElement>
-} & T
-
-export type ActionCardListFormProps<A, F extends FieldValues = FieldValues> = Omit<
-  ActionCardListProps,
-  'value' | 'error' | 'onChange' | 'children'
-> &
-  Omit<ControllerProps<F>, 'render'> & {
-    items: A[]
-    render: React.FC<ActionCardItemRenderProps<A>>
-  }
-
-export function ActionCardListForm<
-  T extends ActionCardItemBase,
-  F extends FieldValues = FieldValues,
->(props: ActionCardListFormProps<T, F>) {
-  const {
-    required,
-    rules,
-    items,
-    render,
-    control,
-    name,
-    errorMessage,
-    defaultValue,
-    multiple,
-    ...other
-  } = 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 {
-    field: { onChange, value, ref },
-    fieldState,
-    formState,
-  } = useController({
-    ...props,
-    control,
-    name,
-    defaultValue,
-    rules: { required: errorMessage || required, ...rules },
-  })
-
-  return (
-    <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>
-  )
-}