@graphcommerce/next-ui 4.8.1 → 4.8.2

package/ActionCard/ActionCard.tsx

@@ -2,18 +2,18 @@ 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<HTMLButtonElement>, v: string | number) => void
+  onChange?: (e: FormEvent<HTMLButtonElement>, v: string | number) => void
   selected?: boolean
   hidden?: boolean | (() => boolean)
-  value: string
+  value: string | number
   reset?: React.ReactNode
 }
 

package/ActionCard/ActionCardList.tsx

@@ -16,7 +16,7 @@ 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

package/ActionCard/ActionCardListForm.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { Controller, ControllerProps } from '@graphcommerce/react-hook-form'
+import { Trans } from '@lingui/react'
+import { Button } from '@mui/material'
+import React from 'react'
+import { ActionCard, ActionCardProps } from './ActionCard'
+import { ActionCardList, ActionCardListProps } from './ActionCardList'
+
+export type ActionCardRenderProps = Pick<
+  ActionCardProps,
+  'action' | 'reset' | 'selected' | 'hidden' | 'value' | 'onClick' | 'onChange'
+>
+
+export type ActionCardItem = Omit<
+  ActionCardProps,
+  'action' | 'reset' | 'selected' | 'hidden' | 'onClick' | 'onChange'
+>
+
+type ActionCardListFormProps = Omit<ActionCardListProps, 'value'> &
+  Omit<ControllerProps<any>, 'render'> & {
+    items: ActionCardItem[]
+    render?: React.VFC<ActionCardRenderProps>
+  }
+
+export function ActionCardListForm(props: ActionCardListFormProps) {
+  const { required, rules, items, render: RenderItem = ActionCard } = props
+
+  return (
+    <Controller
+      {...props}
+      rules={{ required, ...rules }}
+      render={({ field: { onChange, value }, fieldState, formState }) => (
+        <ActionCardList
+          required
+          value={value}
+          onChange={(_, incomming) => onChange(incomming)}
+          error={formState.isSubmitted && !!fieldState.error}
+        >
+          {items.map((item) => (
+            <RenderItem
+              {...item}
+              key={item.value}
+              value={item.value}
+              selected={value === item.value}
+              hidden={!!value && value !== item.value}
+              action={
+                <Button disableRipple variant='text' color='secondary'>
+                  <Trans id='Select' />
+                </Button>
+              }
+              reset={
+                <Button
+                  disableRipple
+                  variant='text'
+                  color='secondary'
+                  onClick={(e) => {
+                    e.preventDefault()
+                    onChange(null)
+                  }}
+                >
+                  <Trans id='Change' />
+                </Button>
+              }
+            />
+          ))}
+        </ActionCardList>
+      )}
+    />
+  )
+}

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Change Log
 
+## 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

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/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.8.1",
+  "version": "4.8.2",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -20,7 +20,7 @@
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",
     "@graphcommerce/framer-next-pages": "3.2.2",
-    "@graphcommerce/framer-scroller": "2.1.12",
+    "@graphcommerce/framer-scroller": "2.1.13",
     "@graphcommerce/framer-utils": "3.1.3",
     "@graphcommerce/image": "3.1.6",
     "react-is": "^17.0.0",