@graphcommerce/next-ui 9.0.0-canary.78 → 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,17 @@
 # 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
+
+- [#2356](https://github.com/graphcommerce-org/graphcommerce/pull/2356) [`d283901`](https://github.com/graphcommerce-org/graphcommerce/commit/d283901cb537c3e7bf6f5500e9f52f47f452cf10) - Loading an overlay page directly would animate in the overlay instead of directly showing it. ([@paales](https://github.com/paales))
+
 ## 9.0.0-canary.78
 
 ### Patch Changes

package/Overlay/components/OverlayBase.tsx

@@ -1,3 +1,4 @@
+import { Direction } from '@graphcommerce/framer-next-pages'
 import { Scroller, useScrollerContext, useScrollTo } from '@graphcommerce/framer-scroller'
 import {
   dvh,
@@ -46,7 +47,7 @@ export type LayoutOverlayBaseProps = {
   sx?: SxProps<Theme>
   sxBackdrop?: SxProps<Theme>
   active: boolean
-  direction?: 1 | -1
+  direction?: Direction
   onClosed: () => void
   offsetPageY?: number
   isPresent: boolean
@@ -123,7 +124,8 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     props.smSpacingTop ?? ((theme) => `calc(${theme.appShell.headerHeightSm} * 0.5)`)
   )(th)
 
-  const { scrollerRef, snap, scroll, getScrollSnapPositions, disableSnap } = useScrollerContext()
+  const { scrollerRef, snap, scroll, getScrollSnapPositions, disableSnap, enableSnap } =
+    useScrollerContext()
   const scrollTo = useScrollTo()
 
   const beforeRef = useRef<HTMLDivElement>(null)
@@ -137,7 +139,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
 
   const match = useMatchMedia()
   const positions = useConstant(() => ({
-    open: { x: motionValue(0), y: motionValue(0), visible: motionValue(0) },
+    open: { x: motionValue(0), y: motionValue(0), visible: motionValue(direction === 0 ? 1 : 0) },
     closed: { x: motionValue(0), y: motionValue(0) },
   }))
 
@@ -277,17 +279,40 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
   useIsomorphicLayoutEffect(() => {
     const scroller = scrollerRef.current
 
-    if (!scroller || !isPresent) return
+    if (!scroller || !isPresent || position.get() === OverlayPosition.OPENED) return
 
     if (variant() === 'right') document.body.style.overflow = 'hidden'
 
-    if (position.get() !== OverlayPosition.OPENED && !scroll.animating.get()) {
+    if (direction === 0) {
+      disableSnap()
+      scroller.scrollTop = positions.open.y.get()
+      scroller.scrollLeft = positions.open.x.get()
+      scroll.y.set(positions.open.y.get())
+      scroll.x.set(positions.open.x.get())
+      position.set(OverlayPosition.OPENED)
+      enableSnap()
+    } else if (!scroll.animating.get()) {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       scrollTo(openClosePositions().open, { stopAnimationOnScroll: false }).then(() =>
         position.set(OverlayPosition.OPENED),
       )
     }
-  }, [isPresent, openClosePositions, position, scroll.animating, scrollTo, scrollerRef, variant])
+  }, [
+    direction,
+    disableSnap,
+    enableSnap,
+    isPresent,
+    openClosePositions,
+    position,
+    positions.open.x,
+    positions.open.y,
+    scroll.animating,
+    scroll.x,
+    scroll.y,
+    scrollTo,
+    scrollerRef,
+    variant,
+  ])
 
   // When the overlay is closed by navigating away, we're closing the overlay.
   useEffect(() => {

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.78",
+  "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.78",
-    "@graphcommerce/framer-next-pages": "^9.0.0-canary.78",
-    "@graphcommerce/framer-scroller": "^9.0.0-canary.78",
-    "@graphcommerce/framer-utils": "^9.0.0-canary.78",
-    "@graphcommerce/image": "^9.0.0-canary.78",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.78",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.78",
+    "@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>
-  )
-}