@graphcommerce/next-ui 4.8.0 → 4.8.3

package/ActionCard/ActionCard.tsx

@@ -2,21 +2,32 @@ import { Theme } from '@emotion/react'
 import { SxProps, ButtonBase, Box } from '@mui/material'
 import React, { FormEvent } from 'react'
 
-type ActionCardProps = {
+export type ActionCardProps = {
   sx?: SxProps<Theme>
   title?: string | React.ReactNode
   image?: React.ReactNode
   action?: React.ReactNode
   details?: React.ReactNode
   secondaryAction?: React.ReactNode
-  onClick?: (e: FormEvent<HTMLButtonElement>, v: string) => void
-  onChange?: (e: FormEvent<HTMLButtonElement>, v: string) => void
+  onClick?: (e: FormEvent<HTMLElement>, v: string | number) => void
   selected?: boolean
   hidden?: boolean | (() => boolean)
-  value: string
+  value: string | number
   reset?: React.ReactNode
 }
 
+const actionButtonStyles: SxProps = {
+  '& .MuiButton-root': {
+    '&.MuiButton-textSecondary': {
+      padding: '5px',
+      margin: '-5px',
+      '&:hover': {
+        background: 'none',
+      },
+    },
+  },
+}
+
 export function ActionCard(props: ActionCardProps) {
   const {
     title,
@@ -25,7 +36,6 @@ export function ActionCard(props: ActionCardProps) {
     details,
     secondaryAction,
     sx = [],
-    onChange,
     onClick,
     value,
     selected,
@@ -33,52 +43,31 @@ export function ActionCard(props: ActionCardProps) {
     reset,
   } = props
 
-  const handleChange = (event: FormEvent<HTMLButtonElement>) => onChange?.(event, value)
-  const handleClick = (event: FormEvent<HTMLButtonElement>) => {
-    if (onClick) {
-      onClick(event, value)
-      if (event.isDefaultPrevented()) return
-    }
-    handleChange(event)
-  }
-
-  const actionButtonStyles: SxProps = {
-    '& .MuiButton-root': {
-      '&.MuiButton-textSecondary': {
-        padding: '5px',
-        margin: '-5px',
-        '&:hover': {
-          background: 'none',
-        },
-      },
-    },
-  }
+  const handleClick = (event: FormEvent<HTMLElement>) => onClick?.(event, value)
 
   return (
     <ButtonBase
-      component='button'
+      component='div'
       className='ActionCard-root'
       onClick={handleClick}
-      onChange={handleChange}
-      value={value}
       sx={[
-        {
+        (theme) => ({
           display: 'grid',
           width: '100%',
           gridTemplateColumns: 'min-content',
-          gridTemplateAreas: `
-        "image title action"
-        "image details secondaryDetails"
-        "image secondaryAction additionalDetails"
-        "additionalContent additionalContent additionalContent"
-        `,
+          gridTemplateAreas: {
+            xs: `
+              "image title action"
+              "image details details"
+              "image secondaryAction additionalDetails"
+              "additionalContent additionalContent additionalContent"
+            `,
+          },
           justifyContent: 'unset',
-        },
-        (theme) => ({
           typography: 'body1',
-          textAlign: 'left',
+          // textAlign: 'left',
           background: theme.palette.background.paper,
-          padding: `calc(${theme.spacings.xs} + 1px)`,
+          padding: `calc(${theme.spacings.xxs} + 1px) calc(${theme.spacings.xs} + 1px)`,
           columnGap: theme.spacings.xxs,
           border: `1px solid ${theme.palette.divider}`,
           borderBottomColor: `transparent`,
@@ -102,7 +91,7 @@ export function ActionCard(props: ActionCardProps) {
             borderTopRightRadius: theme.shape.borderRadius,
             borderBottomLeftRadius: theme.shape.borderRadius,
             borderBottomRightRadius: theme.shape.borderRadius,
-            padding: theme.spacings.xs,
+            padding: `${theme.spacings.xxs} ${theme.spacings.xs}`,
           })),
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}

package/ActionCard/ActionCardList.tsx

@@ -1,6 +1,8 @@
-import { Box } from '@mui/material'
+import { Alert, Box, FormHelperText } from '@mui/material'
+import { AnimatePresence } from 'framer-motion'
 import React from 'react'
 import { isFragment } from 'react-is'
+import { AnimatedRow } from '../AnimatedRow/AnimatedRow'
 
 type MultiSelect = {
   multiple: true
@@ -16,10 +18,11 @@ type Select = {
   onChange?: (event: React.MouseEvent<HTMLElement>, value: string | null) => void
 }
 
-type ActionCardListProps<SelectOrMulti = MultiSelect | Select> = {
+export type ActionCardListProps<SelectOrMulti = MultiSelect | Select> = {
   children?: React.ReactNode
   required?: boolean
   error?: boolean
+  errorMessage?: string
 } & SelectOrMulti
 
 function isMulti(props: ActionCardListProps): props is ActionCardListProps<MultiSelect> {
@@ -33,7 +36,7 @@ function isValueSelected(value: string, candidate: string | string[]) {
 }
 
 export function ActionCardList(props: ActionCardListProps) {
-  const { children, required, value, error = false } = props
+  const { children, required, value, error = false, errorMessage } = props
 
   const handleChange = isMulti(props)
     ? (event: React.MouseEvent<HTMLElement, MouseEvent>, buttonValue: string) => {
@@ -70,15 +73,15 @@ export function ActionCardList(props: ActionCardListProps) {
               paddingLeft: theme.spacings.xs,
               paddingRight: theme.spacings.xs,
             },
-            '& .ActionCard-root:first-of-type': {
+            '& > div:first-of-type.ActionCard-root': {
               borderTop: 2,
               borderTopColor: 'error.main',
-              paddingTop: theme.spacings.xs,
+              paddingTop: theme.spacings.xxs,
             },
-            '& .ActionCard-root:last-of-type': {
+            '& > div:last-of-type.ActionCard-root': {
               borderBottom: 2,
               borderBottomColor: 'error.main',
-              paddingBottom: theme.spacings.xs,
+              paddingBottom: theme.spacings.xxs,
             },
           })),
       ]}
@@ -105,6 +108,15 @@ export function ActionCardList(props: ActionCardListProps) {
               : child.props.selected,
         })
       })}
+      {error && (
+        <Alert
+          severity='error'
+          variant='filled'
+          sx={{ borderStartStartRadius: 0, borderStartEndRadius: 0 }}
+        >
+          {errorMessage}
+        </Alert>
+      )}
     </Box>
   )
 }

package/ActionCard/ActionCardListForm.tsx

@@ -0,0 +1,63 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { Controller, ControllerProps } from '@graphcommerce/react-hook-form'
+import React from 'react'
+import { ActionCardProps } from './ActionCard'
+import { ActionCardList, ActionCardListProps } from './ActionCardList'
+
+export type ActionCardItemBase = Pick<ActionCardProps, 'value'>
+
+export type ActionCardItemRenderer<T> = Pick<ActionCardProps, 'selected' | 'hidden' | 'value'> & {
+  onReset: React.MouseEventHandler<HTMLButtonElement>
+} & T
+
+export type ActionCardListFormProps<T extends ActionCardItemBase> = Omit<
+  ActionCardListProps,
+  'value'
+> &
+  Omit<ControllerProps<any>, 'render'> & {
+    items: T[]
+    render: React.VFC<ActionCardItemRenderer<T>>
+  }
+
+export function ActionCardListForm<T extends ActionCardItemBase>(
+  props: ActionCardListFormProps<T>,
+) {
+  const { required, rules, items, render, control, name, errorMessage } = props
+  const RenderItem = render as React.VFC<ActionCardItemRenderer<ActionCardItemBase>>
+
+  return (
+    <Controller
+      {...props}
+      control={control}
+      name={name}
+      rules={{
+        required,
+        ...rules,
+        validate: (v) => (v ? true : 'Please select a shipping address'),
+      }}
+      render={({ field: { onChange, value }, fieldState, formState }) => (
+        <ActionCardList
+          required
+          value={value}
+          onChange={(_, incomming) => onChange(incomming)}
+          error={formState.isSubmitted && !!fieldState.error}
+          errorMessage={errorMessage}
+        >
+          {items.map((item) => (
+            <RenderItem
+              {...item}
+              key={item.value}
+              value={item.value}
+              selected={value === item.value}
+              hidden={!!value && value !== item.value}
+              onReset={(e) => {
+                e.preventDefault()
+                onChange(null)
+              }}
+            />
+          ))}
+        </ActionCardList>
+      )}
+    />
+  )
+}

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Change Log
 
+## 4.8.3
+
+### Patch Changes
+
+- [#1487](https://github.com/graphcommerce-org/graphcommerce/pull/1487) [`afc67103d`](https://github.com/graphcommerce-org/graphcommerce/commit/afc67103d0e00583e274465036fd287537f95e79) Thanks [@paales](https://github.com/paales)! - When additing an additional breakpoint it would throw a typescript error
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.14
+
+## 4.8.2
+
+### Patch Changes
+
+- [#1485](https://github.com/graphcommerce-org/graphcommerce/pull/1485) [`c8c246b8a`](https://github.com/graphcommerce-org/graphcommerce/commit/c8c246b8aaab0621b68a2fca2a1c529a56fad962) Thanks [@paales](https://github.com/paales)! - TextInputNumber: when adding a label it should be displayed properly
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.13
+
+## 4.8.1
+
+### Patch Changes
+
+- [#1477](https://github.com/graphcommerce-org/graphcommerce/pull/1477) [`a9df81310`](https://github.com/graphcommerce-org/graphcommerce/commit/a9df81310c051876dd82fb2819105dece47cc213) Thanks [@paales](https://github.com/paales)! - Revert faulty background color on LayoutDefault
+
+* [#1477](https://github.com/graphcommerce-org/graphcommerce/pull/1477) [`f167f9963`](https://github.com/graphcommerce-org/graphcommerce/commit/f167f99630966a7de43717937d43669e66132494) Thanks [@paales](https://github.com/paales)! - LayoutOverlay performance improvements
+
+* Updated dependencies [[`55c2dcde7`](https://github.com/graphcommerce-org/graphcommerce/commit/55c2dcde7869ee51b84494af653b3edfd43904a4), [`597e2f413`](https://github.com/graphcommerce-org/graphcommerce/commit/597e2f413bdb5b76793b40ab631ce61390e26e81), [`f167f9963`](https://github.com/graphcommerce-org/graphcommerce/commit/f167f99630966a7de43717937d43669e66132494)]:
+  - @graphcommerce/framer-scroller@2.1.12
+  - @graphcommerce/framer-next-pages@3.2.2
+  - @graphcommerce/framer-utils@3.1.3
+  - @graphcommerce/image@3.1.6
+
 ## 4.8.0
 
 ### Minor Changes

package/LayoutDefault/components/LayoutDefault.tsx

@@ -58,7 +58,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
           display: 'grid',
           gridTemplateRows: `auto auto 1fr auto`,
           gridTemplateColumns: '100%',
-          background: theme.palette.background.paper,
+          background: theme.palette.background.default,
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -177,7 +177,6 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
   useEffect(() => positions.open.visible.onChange((o) => o === 0 && closeOverlay()))
 
   // Measure the offset of the overlay in the scroller.
-
   const offsetY = useMotionValue(0)
   useEffect(() => {
     if (!overlayRef.current) return () => {}
@@ -195,21 +194,20 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
 
   const onClickAway = useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
-      const isTarget = event.target === scrollerRef.current || event.target === beforeRef.current
+      const isTarget =
+        event.target === scrollerRef.current ||
+        event.target === beforeRef.current ||
+        event.target === overlayRef.current
       if (isTarget && snap.get()) closeOverlay()
     },
     [closeOverlay, scrollerRef, snap],
   )
 
-  const pointerEvents = useTransform(position, (p) =>
-    p === OverlayPosition.CLOSED ? 'none' : 'auto',
-  )
-
   return (
     <>
       <MotionDiv
         className={classes.backdrop}
-        style={{ opacity: positions.open.visible, pointerEvents }}
+        style={{ opacity: positions.open.visible }}
         sx={[
           {
             zIndex: -1,
@@ -233,7 +231,6 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
         grid={false}
         hideScrollbar
         onClick={onClickAway}
-        style={{ pointerEvents }}
         sx={[
           (theme) => ({
             overscrollBehavior: 'contain',
@@ -320,9 +317,9 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
         <Box
           className={classes.overlay}
           ref={overlayRef}
+          onClick={onClickAway}
           sx={(theme) => ({
             display: 'grid',
-            pointerEvents: 'none',
             gridArea: 'overlay',
             scrollSnapAlign: 'start',
             scrollSnapStop: 'always',

package/TextInputNumber/TextInputNumber.tsx

@@ -97,13 +97,10 @@ export function TextInputNumber(props: TextInputNumberProps) {
           width: responsiveVal(80, 120),
           backgroundColor: 'inherit',
         },
-
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
       autoComplete='off'
-      label={' '}
       id='quantity-input'
-      InputLabelProps={{ shrink: false }}
       InputProps={{
         ...textFieldProps.InputProps,
         startAdornment: (

package/Theme/themeDefaults.ts

@@ -1,10 +1,9 @@
-import { BreakpointsOptions, experimental_sx, SxProps, Theme } from '@mui/material'
+import { experimental_sx, SxProps, Theme } from '@mui/material'
 import { Shadows } from '@mui/material/styles/shadows'
-import type { SetRequired } from 'type-fest'
 
 // https://material.io/design/environment/elevation.html#default-elevations
 
-const breakpoints: SetRequired<BreakpointsOptions, 'values'> = {
+const breakpoints = {
   values: {
     xs: 0,
     sm: 600,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.8.0",
+  "version": "4.8.3",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -19,10 +19,10 @@
     "@emotion/react": "^11.9.0",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",
-    "@graphcommerce/framer-next-pages": "3.2.1",
-    "@graphcommerce/framer-scroller": "2.1.11",
-    "@graphcommerce/framer-utils": "3.1.2",
-    "@graphcommerce/image": "3.1.5",
+    "@graphcommerce/framer-next-pages": "3.2.2",
+    "@graphcommerce/framer-scroller": "2.1.14",
+    "@graphcommerce/framer-utils": "3.1.3",
+    "@graphcommerce/image": "3.1.6",
     "react-is": "^17.0.0",
     "react-schemaorg": "^2.0.0",
     "schema-dts": "^1.1.0"