@graphcommerce/next-ui 4.7.2 → 4.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ActionCard/ActionCard.tsx +129 -0
- package/ActionCard/ActionCardList.tsx +110 -0
- package/ActionCard/ActionCardListForm.tsx +70 -0
- package/CHANGELOG.md +36 -0
- package/LayoutOverlay/components/LayoutOverlayBase.tsx +6 -9
- package/Pagination/Pagination.tsx +4 -1
- package/Snackbar/MessageSnackbarImpl.tsx +9 -1
- package/TextInputNumber/TextInputNumber.tsx +0 -3
- package/index.ts +2 -0
- package/package.json +5 -5
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import { Theme } from '@emotion/react'
|
|
2
|
+
import { SxProps, ButtonBase, Box } from '@mui/material'
|
|
3
|
+
import React, { FormEvent } from 'react'
|
|
4
|
+
|
|
5
|
+
export type ActionCardProps = {
|
|
6
|
+
sx?: SxProps<Theme>
|
|
7
|
+
title?: string | React.ReactNode
|
|
8
|
+
image?: React.ReactNode
|
|
9
|
+
action?: React.ReactNode
|
|
10
|
+
details?: React.ReactNode
|
|
11
|
+
secondaryAction?: React.ReactNode
|
|
12
|
+
onClick?: (e: FormEvent<HTMLButtonElement>, v: string | number) => void
|
|
13
|
+
onChange?: (e: FormEvent<HTMLButtonElement>, v: string | number) => void
|
|
14
|
+
selected?: boolean
|
|
15
|
+
hidden?: boolean | (() => boolean)
|
|
16
|
+
value: string | number
|
|
17
|
+
reset?: React.ReactNode
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export function ActionCard(props: ActionCardProps) {
|
|
21
|
+
const {
|
|
22
|
+
title,
|
|
23
|
+
image,
|
|
24
|
+
action,
|
|
25
|
+
details,
|
|
26
|
+
secondaryAction,
|
|
27
|
+
sx = [],
|
|
28
|
+
onChange,
|
|
29
|
+
onClick,
|
|
30
|
+
value,
|
|
31
|
+
selected,
|
|
32
|
+
hidden,
|
|
33
|
+
reset,
|
|
34
|
+
} = props
|
|
35
|
+
|
|
36
|
+
const handleChange = (event: FormEvent<HTMLButtonElement>) => onChange?.(event, value)
|
|
37
|
+
const handleClick = (event: FormEvent<HTMLButtonElement>) => {
|
|
38
|
+
if (onClick) {
|
|
39
|
+
onClick(event, value)
|
|
40
|
+
if (event.isDefaultPrevented()) return
|
|
41
|
+
}
|
|
42
|
+
handleChange(event)
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
const actionButtonStyles: SxProps = {
|
|
46
|
+
'& .MuiButton-root': {
|
|
47
|
+
'&.MuiButton-textSecondary': {
|
|
48
|
+
padding: '5px',
|
|
49
|
+
margin: '-5px',
|
|
50
|
+
'&:hover': {
|
|
51
|
+
background: 'none',
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
return (
|
|
58
|
+
<ButtonBase
|
|
59
|
+
component='button'
|
|
60
|
+
className='ActionCard-root'
|
|
61
|
+
onClick={handleClick}
|
|
62
|
+
onChange={handleChange}
|
|
63
|
+
value={value}
|
|
64
|
+
sx={[
|
|
65
|
+
{
|
|
66
|
+
display: 'grid',
|
|
67
|
+
width: '100%',
|
|
68
|
+
gridTemplateColumns: 'min-content',
|
|
69
|
+
gridTemplateAreas: `
|
|
70
|
+
"image title action"
|
|
71
|
+
"image details secondaryDetails"
|
|
72
|
+
"image secondaryAction additionalDetails"
|
|
73
|
+
"additionalContent additionalContent additionalContent"
|
|
74
|
+
`,
|
|
75
|
+
justifyContent: 'unset',
|
|
76
|
+
},
|
|
77
|
+
(theme) => ({
|
|
78
|
+
typography: 'body1',
|
|
79
|
+
textAlign: 'left',
|
|
80
|
+
background: theme.palette.background.paper,
|
|
81
|
+
padding: `calc(${theme.spacings.xs} + 1px)`,
|
|
82
|
+
columnGap: theme.spacings.xxs,
|
|
83
|
+
border: `1px solid ${theme.palette.divider}`,
|
|
84
|
+
borderBottomColor: `transparent`,
|
|
85
|
+
'&:first-of-type': {
|
|
86
|
+
borderTopLeftRadius: theme.shape.borderRadius,
|
|
87
|
+
borderTopRightRadius: theme.shape.borderRadius,
|
|
88
|
+
},
|
|
89
|
+
'&:last-of-type': {
|
|
90
|
+
borderBottomLeftRadius: theme.shape.borderRadius,
|
|
91
|
+
borderBottomRightRadius: theme.shape.borderRadius,
|
|
92
|
+
borderBottom: `1px solid ${theme.palette.divider}`,
|
|
93
|
+
},
|
|
94
|
+
}),
|
|
95
|
+
!!hidden && {
|
|
96
|
+
display: 'none',
|
|
97
|
+
},
|
|
98
|
+
!!selected &&
|
|
99
|
+
((theme) => ({
|
|
100
|
+
border: `2px solid ${theme.palette.secondary.main} !important`,
|
|
101
|
+
borderTopLeftRadius: theme.shape.borderRadius,
|
|
102
|
+
borderTopRightRadius: theme.shape.borderRadius,
|
|
103
|
+
borderBottomLeftRadius: theme.shape.borderRadius,
|
|
104
|
+
borderBottomRightRadius: theme.shape.borderRadius,
|
|
105
|
+
padding: theme.spacings.xs,
|
|
106
|
+
})),
|
|
107
|
+
...(Array.isArray(sx) ? sx : [sx]),
|
|
108
|
+
]}
|
|
109
|
+
>
|
|
110
|
+
{image && <Box sx={{ gridArea: 'image', justifySelf: 'center', padding: 1 }}>{image}</Box>}
|
|
111
|
+
{title && <Box sx={{ gridArea: 'title', fontWeight: 'bold' }}>{title}</Box>}
|
|
112
|
+
{action && (
|
|
113
|
+
<Box
|
|
114
|
+
sx={{
|
|
115
|
+
gridArea: 'action',
|
|
116
|
+
textAlign: 'right',
|
|
117
|
+
...actionButtonStyles,
|
|
118
|
+
}}
|
|
119
|
+
>
|
|
120
|
+
{!selected ? action : reset}
|
|
121
|
+
</Box>
|
|
122
|
+
)}
|
|
123
|
+
{details && <Box sx={{ gridArea: 'details', color: 'text.secondary' }}>{details}</Box>}
|
|
124
|
+
{secondaryAction && (
|
|
125
|
+
<Box sx={{ gridArea: 'secondaryAction', ...actionButtonStyles }}>{secondaryAction}</Box>
|
|
126
|
+
)}
|
|
127
|
+
</ButtonBase>
|
|
128
|
+
)
|
|
129
|
+
}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import { Box } from '@mui/material'
|
|
2
|
+
import React from 'react'
|
|
3
|
+
import { isFragment } from 'react-is'
|
|
4
|
+
|
|
5
|
+
type MultiSelect = {
|
|
6
|
+
multiple: true
|
|
7
|
+
value: string[]
|
|
8
|
+
|
|
9
|
+
onChange?: (event: React.MouseEvent<HTMLElement>, value: string[]) => void
|
|
10
|
+
}
|
|
11
|
+
type Select = {
|
|
12
|
+
multiple?: false
|
|
13
|
+
value: string
|
|
14
|
+
|
|
15
|
+
/** Value is null when deselected when not required */
|
|
16
|
+
onChange?: (event: React.MouseEvent<HTMLElement>, value: string | null) => void
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export type ActionCardListProps<SelectOrMulti = MultiSelect | Select> = {
|
|
20
|
+
children?: React.ReactNode
|
|
21
|
+
required?: boolean
|
|
22
|
+
error?: boolean
|
|
23
|
+
} & SelectOrMulti
|
|
24
|
+
|
|
25
|
+
function isMulti(props: ActionCardListProps): props is ActionCardListProps<MultiSelect> {
|
|
26
|
+
return props.multiple === true
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
function isValueSelected(value: string, candidate: string | string[]) {
|
|
30
|
+
if (candidate === undefined || value === undefined) return false
|
|
31
|
+
if (Array.isArray(candidate)) return candidate.indexOf(value) >= 0
|
|
32
|
+
return value === candidate
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export function ActionCardList(props: ActionCardListProps) {
|
|
36
|
+
const { children, required, value, error = false } = props
|
|
37
|
+
|
|
38
|
+
const handleChange = isMulti(props)
|
|
39
|
+
? (event: React.MouseEvent<HTMLElement, MouseEvent>, buttonValue: string) => {
|
|
40
|
+
const { onChange } = props
|
|
41
|
+
const index = Boolean(value) && value?.indexOf(buttonValue)
|
|
42
|
+
let newValue: string[]
|
|
43
|
+
|
|
44
|
+
if (Array.isArray(value) && value.length && index && index >= 0) {
|
|
45
|
+
newValue = value.slice()
|
|
46
|
+
newValue.splice(index, 1)
|
|
47
|
+
} else {
|
|
48
|
+
newValue = value ? [...value, buttonValue] : [buttonValue]
|
|
49
|
+
}
|
|
50
|
+
onChange?.(event, newValue)
|
|
51
|
+
}
|
|
52
|
+
: (event: React.MouseEvent<HTMLElement, MouseEvent>, buttonValue: string) => {
|
|
53
|
+
const { onChange } = props
|
|
54
|
+
|
|
55
|
+
if (value === buttonValue) return
|
|
56
|
+
if (required) onChange?.(event, buttonValue)
|
|
57
|
+
else onChange?.(event, value === buttonValue ? null : buttonValue)
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
return (
|
|
61
|
+
<Box
|
|
62
|
+
sx={[
|
|
63
|
+
error &&
|
|
64
|
+
((theme) => ({
|
|
65
|
+
'& .ActionCard-root': {
|
|
66
|
+
borderLeft: 2,
|
|
67
|
+
borderRight: 2,
|
|
68
|
+
borderLeftColor: 'error.main',
|
|
69
|
+
borderRightColor: 'error.main',
|
|
70
|
+
paddingLeft: theme.spacings.xs,
|
|
71
|
+
paddingRight: theme.spacings.xs,
|
|
72
|
+
},
|
|
73
|
+
'& .ActionCard-root:first-of-type': {
|
|
74
|
+
borderTop: 2,
|
|
75
|
+
borderTopColor: 'error.main',
|
|
76
|
+
paddingTop: theme.spacings.xs,
|
|
77
|
+
},
|
|
78
|
+
'& .ActionCard-root:last-of-type': {
|
|
79
|
+
borderBottom: 2,
|
|
80
|
+
borderBottomColor: 'error.main',
|
|
81
|
+
paddingBottom: theme.spacings.xs,
|
|
82
|
+
},
|
|
83
|
+
})),
|
|
84
|
+
]}
|
|
85
|
+
>
|
|
86
|
+
{React.Children.map(children, (child) => {
|
|
87
|
+
if (!React.isValidElement(child)) return null
|
|
88
|
+
|
|
89
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
90
|
+
if (isFragment(child)) {
|
|
91
|
+
console.error(
|
|
92
|
+
[
|
|
93
|
+
"@graphcommerce/next-ui: The ActionCardList component doesn't accept a Fragment as a child.",
|
|
94
|
+
'Consider providing an array instead.',
|
|
95
|
+
].join('\n'),
|
|
96
|
+
)
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
return React.cloneElement(child, {
|
|
101
|
+
onClick: handleChange,
|
|
102
|
+
selected:
|
|
103
|
+
child.props.selected === undefined
|
|
104
|
+
? isValueSelected(child.props.value as string, value)
|
|
105
|
+
: child.props.selected,
|
|
106
|
+
})
|
|
107
|
+
})}
|
|
108
|
+
</Box>
|
|
109
|
+
)
|
|
110
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
/* eslint-disable import/no-extraneous-dependencies */
|
|
2
|
+
import { Controller, ControllerProps } from '@graphcommerce/react-hook-form'
|
|
3
|
+
import { Trans } from '@lingui/react'
|
|
4
|
+
import { Button } from '@mui/material'
|
|
5
|
+
import React from 'react'
|
|
6
|
+
import { ActionCard, ActionCardProps } from './ActionCard'
|
|
7
|
+
import { ActionCardList, ActionCardListProps } from './ActionCardList'
|
|
8
|
+
|
|
9
|
+
export type ActionCardRenderProps = Pick<
|
|
10
|
+
ActionCardProps,
|
|
11
|
+
'action' | 'reset' | 'selected' | 'hidden' | 'value' | 'onClick' | 'onChange'
|
|
12
|
+
>
|
|
13
|
+
|
|
14
|
+
export type ActionCardItem = Omit<
|
|
15
|
+
ActionCardProps,
|
|
16
|
+
'action' | 'reset' | 'selected' | 'hidden' | 'onClick' | 'onChange'
|
|
17
|
+
>
|
|
18
|
+
|
|
19
|
+
type ActionCardListFormProps = Omit<ActionCardListProps, 'value'> &
|
|
20
|
+
Omit<ControllerProps<any>, 'render'> & {
|
|
21
|
+
items: ActionCardItem[]
|
|
22
|
+
render?: React.VFC<ActionCardRenderProps>
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export function ActionCardListForm(props: ActionCardListFormProps) {
|
|
26
|
+
const { required, rules, items, render: RenderItem = ActionCard } = props
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
<Controller
|
|
30
|
+
{...props}
|
|
31
|
+
rules={{ required, ...rules }}
|
|
32
|
+
render={({ field: { onChange, value }, fieldState, formState }) => (
|
|
33
|
+
<ActionCardList
|
|
34
|
+
required
|
|
35
|
+
value={value}
|
|
36
|
+
onChange={(_, incomming) => onChange(incomming)}
|
|
37
|
+
error={formState.isSubmitted && !!fieldState.error}
|
|
38
|
+
>
|
|
39
|
+
{items.map((item) => (
|
|
40
|
+
<RenderItem
|
|
41
|
+
{...item}
|
|
42
|
+
key={item.value}
|
|
43
|
+
value={item.value}
|
|
44
|
+
selected={value === item.value}
|
|
45
|
+
hidden={!!value && value !== item.value}
|
|
46
|
+
action={
|
|
47
|
+
<Button disableRipple variant='text' color='secondary'>
|
|
48
|
+
<Trans id='Select' />
|
|
49
|
+
</Button>
|
|
50
|
+
}
|
|
51
|
+
reset={
|
|
52
|
+
<Button
|
|
53
|
+
disableRipple
|
|
54
|
+
variant='text'
|
|
55
|
+
color='secondary'
|
|
56
|
+
onClick={(e) => {
|
|
57
|
+
e.preventDefault()
|
|
58
|
+
onChange(null)
|
|
59
|
+
}}
|
|
60
|
+
>
|
|
61
|
+
<Trans id='Change' />
|
|
62
|
+
</Button>
|
|
63
|
+
}
|
|
64
|
+
/>
|
|
65
|
+
))}
|
|
66
|
+
</ActionCardList>
|
|
67
|
+
)}
|
|
68
|
+
/>
|
|
69
|
+
)
|
|
70
|
+
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,41 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 4.8.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#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
|
|
8
|
+
|
|
9
|
+
- Updated dependencies []:
|
|
10
|
+
- @graphcommerce/framer-scroller@2.1.13
|
|
11
|
+
|
|
12
|
+
## 4.8.1
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#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
|
|
17
|
+
|
|
18
|
+
* [#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
|
|
19
|
+
|
|
20
|
+
* 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)]:
|
|
21
|
+
- @graphcommerce/framer-scroller@2.1.12
|
|
22
|
+
- @graphcommerce/framer-next-pages@3.2.2
|
|
23
|
+
- @graphcommerce/framer-utils@3.1.3
|
|
24
|
+
- @graphcommerce/image@3.1.6
|
|
25
|
+
|
|
26
|
+
## 4.8.0
|
|
27
|
+
|
|
28
|
+
### Minor Changes
|
|
29
|
+
|
|
30
|
+
- [#1462](https://github.com/graphcommerce-org/graphcommerce/pull/1462) [`3ac90b57c`](https://github.com/graphcommerce-org/graphcommerce/commit/3ac90b57c68b96f9d81771d6664ed9435a28fc1d) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - Added translation for the pagination
|
|
31
|
+
|
|
32
|
+
### Patch Changes
|
|
33
|
+
|
|
34
|
+
- [#1467](https://github.com/graphcommerce-org/graphcommerce/pull/1467) [`0363b9671`](https://github.com/graphcommerce-org/graphcommerce/commit/0363b9671db7c2932321d97faf6f1eb385238397) Thanks [@timhofman](https://github.com/timhofman)! - optional feedback message upon adding products to wishlist
|
|
35
|
+
|
|
36
|
+
- Updated dependencies []:
|
|
37
|
+
- @graphcommerce/framer-scroller@2.1.11
|
|
38
|
+
|
|
3
39
|
## 4.7.2
|
|
4
40
|
|
|
5
41
|
### Patch Changes
|
|
@@ -177,7 +177,6 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
|
|
|
177
177
|
useEffect(() => positions.open.visible.onChange((o) => o === 0 && closeOverlay()))
|
|
178
178
|
|
|
179
179
|
// Measure the offset of the overlay in the scroller.
|
|
180
|
-
|
|
181
180
|
const offsetY = useMotionValue(0)
|
|
182
181
|
useEffect(() => {
|
|
183
182
|
if (!overlayRef.current) return () => {}
|
|
@@ -195,21 +194,20 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
|
|
|
195
194
|
|
|
196
195
|
const onClickAway = useCallback(
|
|
197
196
|
(event: React.MouseEvent<HTMLDivElement>) => {
|
|
198
|
-
const isTarget =
|
|
197
|
+
const isTarget =
|
|
198
|
+
event.target === scrollerRef.current ||
|
|
199
|
+
event.target === beforeRef.current ||
|
|
200
|
+
event.target === overlayRef.current
|
|
199
201
|
if (isTarget && snap.get()) closeOverlay()
|
|
200
202
|
},
|
|
201
203
|
[closeOverlay, scrollerRef, snap],
|
|
202
204
|
)
|
|
203
205
|
|
|
204
|
-
const pointerEvents = useTransform(position, (p) =>
|
|
205
|
-
p === OverlayPosition.CLOSED ? 'none' : 'auto',
|
|
206
|
-
)
|
|
207
|
-
|
|
208
206
|
return (
|
|
209
207
|
<>
|
|
210
208
|
<MotionDiv
|
|
211
209
|
className={classes.backdrop}
|
|
212
|
-
style={{ opacity: positions.open.visible
|
|
210
|
+
style={{ opacity: positions.open.visible }}
|
|
213
211
|
sx={[
|
|
214
212
|
{
|
|
215
213
|
zIndex: -1,
|
|
@@ -233,7 +231,6 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
|
|
|
233
231
|
grid={false}
|
|
234
232
|
hideScrollbar
|
|
235
233
|
onClick={onClickAway}
|
|
236
|
-
style={{ pointerEvents }}
|
|
237
234
|
sx={[
|
|
238
235
|
(theme) => ({
|
|
239
236
|
overscrollBehavior: 'contain',
|
|
@@ -320,9 +317,9 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
|
|
|
320
317
|
<Box
|
|
321
318
|
className={classes.overlay}
|
|
322
319
|
ref={overlayRef}
|
|
320
|
+
onClick={onClickAway}
|
|
323
321
|
sx={(theme) => ({
|
|
324
322
|
display: 'grid',
|
|
325
|
-
pointerEvents: 'none',
|
|
326
323
|
gridArea: 'overlay',
|
|
327
324
|
scrollSnapAlign: 'start',
|
|
328
325
|
scrollSnapStop: 'always',
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Trans } from '@lingui/react'
|
|
1
2
|
import { PaginationProps, Box, SxProps, Theme, IconButton } from '@mui/material'
|
|
2
3
|
import usePagination, { UsePaginationItem } from '@mui/material/usePagination'
|
|
3
4
|
import React from 'react'
|
|
@@ -75,7 +76,9 @@ export function Pagination(props: PagePaginationProps) {
|
|
|
75
76
|
>
|
|
76
77
|
{page === 1 ? chevronLeft : renderLink(page - 1, chevronLeft, prevBtnProps)}
|
|
77
78
|
|
|
78
|
-
<Box typography='body1'>
|
|
79
|
+
<Box typography='body1'>
|
|
80
|
+
<Trans id='Page {page} of {count}' values={{ page, count: Math.max(1, count) }} />
|
|
81
|
+
</Box>
|
|
79
82
|
|
|
80
83
|
{page === count ? chevronRight : renderLink(page + 1, chevronRight, nextBtnProps)}
|
|
81
84
|
</Box>
|
|
@@ -64,11 +64,18 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
|
|
|
64
64
|
setShowSnackbar(!!open)
|
|
65
65
|
}, [open])
|
|
66
66
|
|
|
67
|
-
const hideSnackbar = () => {
|
|
67
|
+
const hideSnackbar = (e) => {
|
|
68
|
+
e.preventDefault()
|
|
69
|
+
|
|
68
70
|
setShowSnackbar(false)
|
|
69
71
|
onClose?.()
|
|
70
72
|
}
|
|
71
73
|
|
|
74
|
+
const preventAnimationBubble: React.MouseEventHandler<HTMLButtonElement> = (e) => {
|
|
75
|
+
e.preventDefault()
|
|
76
|
+
e.stopPropagation()
|
|
77
|
+
}
|
|
78
|
+
|
|
72
79
|
let icon = iconCheckmark
|
|
73
80
|
if (severity === 'error') icon = iconSadFace
|
|
74
81
|
|
|
@@ -131,6 +138,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
|
|
|
131
138
|
aria-label='Close'
|
|
132
139
|
size='small'
|
|
133
140
|
onClick={hideSnackbar}
|
|
141
|
+
onMouseDown={preventAnimationBubble}
|
|
134
142
|
sx={(theme) => ({
|
|
135
143
|
backgroundColor: lighten(theme.palette.background.paper, 0.1),
|
|
136
144
|
})}
|
|
@@ -97,13 +97,10 @@ export function TextInputNumber(props: TextInputNumberProps) {
|
|
|
97
97
|
width: responsiveVal(80, 120),
|
|
98
98
|
backgroundColor: 'inherit',
|
|
99
99
|
},
|
|
100
|
-
|
|
101
100
|
...(Array.isArray(sx) ? sx : [sx]),
|
|
102
101
|
]}
|
|
103
102
|
autoComplete='off'
|
|
104
|
-
label={' '}
|
|
105
103
|
id='quantity-input'
|
|
106
|
-
InputLabelProps={{ shrink: false }}
|
|
107
104
|
InputProps={{
|
|
108
105
|
...textFieldProps.InputProps,
|
|
109
106
|
startAdornment: (
|
package/index.ts
CHANGED
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@graphcommerce/next-ui",
|
|
3
3
|
"homepage": "https://www.graphcommerce.org/",
|
|
4
4
|
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
-
"version": "4.
|
|
5
|
+
"version": "4.8.2",
|
|
6
6
|
"author": "",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"sideEffects": false,
|
|
@@ -19,10 +19,10 @@
|
|
|
19
19
|
"@emotion/react": "^11.9.0",
|
|
20
20
|
"@emotion/server": "^11.4.0",
|
|
21
21
|
"@emotion/styled": "^11.6.0",
|
|
22
|
-
"@graphcommerce/framer-next-pages": "3.2.
|
|
23
|
-
"@graphcommerce/framer-scroller": "2.1.
|
|
24
|
-
"@graphcommerce/framer-utils": "3.1.
|
|
25
|
-
"@graphcommerce/image": "3.1.
|
|
22
|
+
"@graphcommerce/framer-next-pages": "3.2.2",
|
|
23
|
+
"@graphcommerce/framer-scroller": "2.1.13",
|
|
24
|
+
"@graphcommerce/framer-utils": "3.1.3",
|
|
25
|
+
"@graphcommerce/image": "3.1.6",
|
|
26
26
|
"react-is": "^17.0.0",
|
|
27
27
|
"react-schemaorg": "^2.0.0",
|
|
28
28
|
"schema-dts": "^1.1.0"
|