@graphcommerce/next-ui 9.0.0-canary.73 → 9.0.0-canary.75

package/CHANGELOG.md

@@ -1,7 +1,19 @@
 # Change Log
 
+## 9.0.0-canary.75
+
+### Patch Changes
+
+- [#2348](https://github.com/graphcommerce-org/graphcommerce/pull/2348) [`61b66ef`](https://github.com/graphcommerce-org/graphcommerce/commit/61b66efeab9b377c8daa322015d4b55cdf3db4c1) - Added a new OverlayHeader component to be used in combination with the Overlay component. ([@JoshuaS98](https://github.com/JoshuaS98))
+
+## 9.0.0-canary.74
+
 ## 9.0.0-canary.73
 
+### Patch Changes
+
+- [`4c24225`](https://github.com/graphcommerce-org/graphcommerce/commit/4c24225f9f998cd40e71da06528eb9323e9b6752) - Created a new `memoDeep` function that is a deep compare variant of `React.memo`. Performance seems to be pretty good, but should only be used as a result of a profiling session. ([@paales](https://github.com/paales))
+
 ## 9.0.0-canary.72
 
 ## 9.0.0-canary.71

package/Layout/components/LayoutHeaderClose.tsx

@@ -6,18 +6,24 @@ import { IconSvg, useIconSvgSize } from '../../IconSvg'
 import { useFabSize } from '../../Theme'
 import { iconClose } from '../../icons'
 
+type LayoutHeaderCloseProps = {
+  onClose?: () => void
+}
+
 export function useShowClose() {
   const { overlayGroup } = usePageContext()
   return !!overlayGroup
 }
 
-export function LayoutHeaderClose() {
+export function LayoutHeaderClose(props: LayoutHeaderCloseProps) {
+  const { onClose } = props
   const { closeSteps } = usePageContext()
   const [disabled, setDisabled] = useState(false)
   const go = useGo(closeSteps * -1)
   const onClick = () => {
     setDisabled(true)
-    go()
+
+    return onClose ? onClose() : go()
   }
 
   const fabSize = useFabSize('responsive')

package/Overlay/components/OverlayHeader.tsx

@@ -0,0 +1,27 @@
+import { LayoutHeaderProps, LayoutTitle, TitleProps } from '../../Layout'
+import { LayoutHeaderClose } from '../../Layout/components/LayoutHeaderClose'
+import { LayoutOverlayHeader } from '../../LayoutOverlay/components/LayoutOverlayHeader'
+
+type OverlayHeaderProps = Omit<LayoutHeaderProps, 'hideBackButton' | 'switchPoint'> &
+  Pick<TitleProps, 'icon'> & { onClose: () => void }
+
+export const OverlayHeader = (props: OverlayHeaderProps) => {
+  const { children, onClose, sx = [], icon, primary, secondary, ...rest } = props
+
+  return (
+    <LayoutOverlayHeader
+      noAlign
+      sx={[{ '&.noAlign': { mb: 0 } }, ...(Array.isArray(sx) ? sx : [sx])]}
+      switchPoint={-10000}
+      size='small'
+      hideBackButton
+      primary={primary ?? <LayoutHeaderClose onClose={onClose} />}
+      secondary={primary ? <LayoutHeaderClose onClose={onClose} /> : secondary}
+      {...rest}
+    >
+      <LayoutTitle size='small' component='span' icon={icon}>
+        {children}
+      </LayoutTitle>
+    </LayoutOverlayHeader>
+  )
+}

package/Overlay/components/index.ts

@@ -1,3 +1,4 @@
 export * from './OverlayBase'
 export * from './Overlay'
 export * from './OverlayStickyBottom'
+export * from './OverlayHeader'

package/hooks/index.ts

@@ -7,3 +7,4 @@ export * from './useStorefrontConfig'
 export * from './useUrlQuery'
 export * from './useIsSsr'
 export * from './useLocale'
+export * from './memoDeep'

package/hooks/memoDeep.ts

@@ -0,0 +1,38 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { equal } from '@wry/equality'
+import { FunctionComponent, memo, NamedExoticComponent } from 'react'
+
+/**
+ * This is a deep comparison version of React's `memo` function.
+ *
+ * This method isn't too expensive to run, but will be rerun every time a parent component is rendered.
+ *
+ * This should probably only be used as the result of a performance profiling session.
+ */
+export function memoDeep<P extends object>(
+  Component: FunctionComponent<P>,
+  measure: boolean = false,
+): NamedExoticComponent<P> {
+  return memo(
+    Component,
+    process.env.NODE_ENV === 'development' && measure
+      ? (prevProps, nextProps) => {
+          const start = performance.now()
+          const result = equal(prevProps, nextProps)
+          const ms = performance.now() - start
+
+          if (ms < 0.2) return result
+
+          console.log(`memoDeep took more than 0.2ms`, {
+            result,
+            ms,
+            Component,
+            prevProps,
+            nextProps,
+          })
+
+          return result
+        }
+      : equal,
+  )
+}

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.73",
+  "version": "9.0.0-canary.75",
   "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.73",
-    "@graphcommerce/framer-next-pages": "^9.0.0-canary.73",
-    "@graphcommerce/framer-scroller": "^9.0.0-canary.73",
-    "@graphcommerce/framer-utils": "^9.0.0-canary.73",
-    "@graphcommerce/image": "^9.0.0-canary.73",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.73",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.73",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.75",
+    "@graphcommerce/framer-next-pages": "^9.0.0-canary.75",
+    "@graphcommerce/framer-scroller": "^9.0.0-canary.75",
+    "@graphcommerce/framer-utils": "^9.0.0-canary.75",
+    "@graphcommerce/image": "^9.0.0-canary.75",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.75",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.75",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/server.ts

@@ -6,3 +6,4 @@ export * from './utils/sitemap'
 export * from './utils/storefrontConfig'
 export * from './PageMeta/canonicalize'
 export * from './Document'
+export * from './utils/cookie'