@graphcommerce/next-ui 4.28.1 → 4.29.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Change Log
 
+## 4.29.1
+
+### Patch Changes
+
+- [#1684](https://github.com/graphcommerce-org/graphcommerce/pull/1684) [`98d6a9cce`](https://github.com/graphcommerce-org/graphcommerce/commit/98d6a9cce1bb9514088be0af2736721b3edda467) Thanks [@paales](https://github.com/paales)! - When dragging the overlay down it doesn't close
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.43
+
+## 4.29.0
+
+### Minor Changes
+
+- [#1679](https://github.com/graphcommerce-org/graphcommerce/pull/1679) [`0bd9ea582`](https://github.com/graphcommerce-org/graphcommerce/commit/0bd9ea58230dde79c5fe2cdb07e9860151460270) Thanks [@paales](https://github.com/paales)! - Added a new Fab component which adds a loading state
+
+### Patch Changes
+
+- [#1679](https://github.com/graphcommerce-org/graphcommerce/pull/1679) [`e76df6dc3`](https://github.com/graphcommerce-org/graphcommerce/commit/e76df6dc37c11c793a5d008ba36932d17dc23855) Thanks [@paales](https://github.com/paales)! - Added AddProductsToCartFab for a smaller add to cart button
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.42
+
 ## 4.28.1
 
 ### Patch Changes

package/Fab/Fab.tsx

@@ -0,0 +1,57 @@
+import {
+  Box,
+  CircularProgress,
+  CircularProgressProps,
+  Fab as FabBase,
+  FabProps as FabPropsBase,
+} from '@mui/material'
+import { IconSvg, IconSvgProps } from '../IconSvg'
+import { useFabSize } from '../Theme/MuiFab'
+
+export type FabProps = Omit<FabPropsBase<'button'>, 'variant' | 'children'> & {
+  loading?: boolean
+  icon: IconSvgProps['src']
+  circularProgress?: Omit<CircularProgressProps, 'size'>
+}
+
+/** Adds loading functionality to the Fab component. */
+export function Fab(props: FabProps) {
+  const {
+    size = 'responsive',
+    disabled,
+    loading,
+    sx = [],
+    icon,
+    circularProgress,
+    ...fabProps
+  } = props
+
+  const fabSize = useFabSize(size)
+
+  const circSx = circularProgress?.sx ?? []
+
+  return (
+    <FabBase
+      type='submit'
+      color='primary'
+      size={size}
+      {...fabProps}
+      disabled={disabled}
+      sx={[{ display: 'grid' }, ...(Array.isArray(sx) ? sx : [sx])]}
+    >
+      <Box sx={{ display: 'flex', placeContent: 'center', gridArea: '1/1' }}>
+        <IconSvg src={icon} size='medium' />
+      </Box>
+      {loading && (
+        <CircularProgress
+          size={fabSize}
+          {...circularProgress}
+          sx={[
+            { display: 'flex', placeContent: 'center', gridArea: '1/1' },
+            ...(Array.isArray(circSx) ? circSx : [circSx]),
+          ]}
+        />
+      )}
+    </FabBase>
+  )
+}

package/Fab/index.ts

@@ -0,0 +1 @@
+export * from './Fab'

package/Overlay/components/OverlayBase.tsx

@@ -195,10 +195,7 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
 
   // When the overlay isn't visible anymore, we navigate back.
   useEffect(
-    () =>
-      positions.open.visible.onChange(
-        (o) => position.get() !== OverlayPosition.OPENED && o === 0 && closeOverlay(),
-      ),
+    () => positions.open.visible.onChange((o) => o === 0 && closeOverlay()),
     [closeOverlay, position, positions.open.visible],
   )
 

package/Snackbar/ErrorSnackbar.tsx

@@ -1,9 +1,9 @@
 import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
 import { MessageSnackbar } from './MessageSnackbar'
-import { MessageSnackbarImplProps } from './MessageSnackbarImpl'
+import { MessageSnackbarProps } from './MessageSnackbarImpl'
 
-export type ErrorSnackbarProps = MessageSnackbarImplProps
+export type ErrorSnackbarProps = MessageSnackbarProps
 
 export function ErrorSnackbar(props: ErrorSnackbarProps) {
   const { action, ...passedProps } = props

package/Snackbar/MessageSnackbarImpl.tsx

@@ -18,7 +18,7 @@ import { iconClose, iconCheckmark, iconSadFace } from '../icons'
 type Size = 'normal' | 'wide'
 type Variant = 'contained' | 'pill'
 
-export type MessageSnackbarImplProps = Omit<
+export type MessageSnackbarProps = Omit<
   SnackbarProps,
   'autoHideDuration' | 'anchorOrigin' | 'color'
 > & {
@@ -41,7 +41,7 @@ const parts = ['root', 'content', 'children', 'actionButton', 'close'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
 // eslint-disable-next-line import/no-default-export
-export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
+export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
   const [showSnackbar, setShowSnackbar] = useState<boolean>(false)
 
   const {

package/icons/index.ts

@@ -1,42 +1,41 @@
-export { default as iconSearch } from './search.svg'
-export { default as iconPerson } from './person-alt.svg'
+export { default as iconArrowBack } from './arrow-left.svg'
+export { default as iconArrowForward } from './arrow-right.svg'
+export { default as iconShoppingBag } from './bag.svg'
+export { default as iconInvoice } from './box-alt.svg'
+export { default as iconBox } from './box.svg'
+export { default as iconOrderBefore } from './calendar.svg'
+export { default as iconCancelAlt } from './cancel-alt.svg'
+export { default as iconCartAdd } from './cart-add.svg'
+export { default as iconCart } from './cart.svg'
+export { default as iconChat } from './chat-alt.svg'
+export { default as iconCustomerService } from './chat.svg'
 export { default as iconChevronDown } from './chevron-down.svg'
-export { default as iconChevronLeft } from './chevron-left.svg'
+export { default as iconChevronBack, default as iconChevronLeft } from './chevron-left.svg'
 export { default as iconChevronRight } from './chevron-right.svg'
 export { default as iconChevronUp } from './chevron-up.svg'
-export { default as iconAddresses } from './home-alt.svg'
+export { default as iconClose } from './close.svg'
+export { default as iconId } from './credit-card.svg'
+export { default as iconEllypsis } from './ellypsis.svg'
+export { default as iconEmail, default as iconEmailOutline } from './envelope-alt.svg'
+export { default as icon404 } from './explore.svg'
 export { default as iconHeart } from './favourite.svg'
+export { default as iconMenu } from './hamburger.svg'
+export { default as iconParty } from './happy-face.svg'
+export { default as iconAddresses, default as iconHome } from './home-alt.svg'
 export { default as iconLocation } from './location.svg'
-export { default as iconInvoice } from './box-alt.svg'
-export { default as iconCustomerService } from './chat.svg'
-export { default as iconShoppingBag } from './bag.svg'
+export { default as iconLock } from './lock.svg'
+export { default as iconFullscreen } from './maximise.svg'
 export { default as iconFullscreenExit } from './minimise.svg'
-export { default as iconChat } from './chat-alt.svg'
-export { default as iconChevronBack } from './chevron-left.svg'
-export { default as iconCancelAlt } from './cancel-alt.svg'
-export { default as iconEmail } from './envelope-alt.svg'
-export { default as iconCheckmark } from './ok.svg'
-export { default as iconArrowBack } from './arrow-left.svg'
-export { default as iconArrowForward } from './arrow-right.svg'
-export { default as iconMenu } from './hamburger.svg'
 export { default as iconMin } from './minus.svg'
-export { default as iconPhone } from './smartphone.svg'
-export { default as iconPlus } from './plus.svg'
-export { default as iconClose } from './close.svg'
-export { default as iconFullscreen } from './maximise.svg'
-export { default as iconOrderBefore } from './calendar.svg'
-export { default as iconBox } from './box.svg'
-export { default as iconHome } from './home-alt.svg'
-export { default as iconId } from './credit-card.svg'
-export { default as iconLock } from './lock.svg'
+export { default as iconMoon } from './moon.svg'
 export { default as iconNewspaper } from './news.svg'
-export { default as iconSadFace } from './sad-face.svg'
+export { default as iconCheckmark } from './ok.svg'
+export { default as iconPerson } from './person-alt.svg'
+export { default as iconPlay } from './play.svg'
+export { default as iconPlus } from './plus.svg'
 export { default as iconShutdown } from './power.svg'
-export { default as iconParty } from './happy-face.svg'
+export { default as iconSadFace } from './sad-face.svg'
+export { default as iconSearch } from './search.svg'
+export { default as iconPhone } from './smartphone.svg'
 export { default as iconStar } from './star.svg'
-export { default as iconEmailOutline } from './envelope-alt.svg'
-export { default as icon404 } from './explore.svg'
 export { default as iconSun } from './sun.svg'
-export { default as iconMoon } from './moon.svg'
-export { default as iconPlay } from './play.svg'
-export { default as iconEllypsis } from './ellypsis.svg'

package/index.ts

@@ -10,6 +10,7 @@ export * from './Blog/BlogTitle/BlogTitle'
 export * from './Button'
 export * from './ChipMenu/ChipMenu'
 export * from './ContainerWithHeader/ContainerWithHeader'
+export * from './Fab'
 export * from './FlagAvatar/FlagAvatar'
 export * from './Footer'
 export * from './Form/Form'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.28.1",
+  "version": "4.29.1",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -20,7 +20,7 @@
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.9.3",
     "@graphcommerce/framer-next-pages": "3.3.2",
-    "@graphcommerce/framer-scroller": "2.1.41",
+    "@graphcommerce/framer-scroller": "2.1.43",
     "@graphcommerce/framer-utils": "3.2.1",
     "@graphcommerce/image": "3.1.10",
     "cookie": "^0.5.0",