@graphcommerce/next-ui 9.1.0-canary.33 → 9.1.0-canary.35

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 9.1.0-canary.35
+
+### Patch Changes
+
+- [#2528](https://github.com/graphcommerce-org/graphcommerce/pull/2528) [`6a3e7f9`](https://github.com/graphcommerce-org/graphcommerce/commit/6a3e7f9bec6d03c146718ad594b064a75b536e99) - cssFlag and cssNotFlag css selector can now select values ([@paales](https://github.com/paales))
+
+- [#2528](https://github.com/graphcommerce-org/graphcommerce/pull/2528) [`a4344ed`](https://github.com/graphcommerce-org/graphcommerce/commit/a4344ed7ff7b3b5f88185c1f6a5fc4b6306fc472) - Created a useCookie hook that is synced between usages ([@paales](https://github.com/paales))
+
+- [#2528](https://github.com/graphcommerce-org/graphcommerce/pull/2528) [`f89210b`](https://github.com/graphcommerce-org/graphcommerce/commit/f89210b09e64f520d308cb1bac693c027be1ac46) - Solve issue where the MenuFabSecondaryItem coudn't handle text overflow. ([@paales](https://github.com/paales))
+
+## 9.1.0-canary.34
+
 ## 9.1.0-canary.33
 
 ## 9.1.0-canary.32

package/LayoutParts/MenuFabSecondaryItem.tsx

@@ -43,7 +43,14 @@ export function MenuFabSecondaryItem(props: FabMenuSecondaryItemProps) {
           {icon}
         </ListItemIcon>
       )}
-      <ListItemText className={classes.icon}>{children}</ListItemText>
+      <ListItemText
+        className={classes.icon}
+        primaryTypographyProps={{
+          sx: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' },
+        }}
+      >
+        {children}
+      </ListItemText>
     </ListItemButton>
   )
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.33",
+  "version": "9.1.0-canary.35",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -24,13 +24,13 @@
     "@emotion/react": "^11",
     "@emotion/server": "^11",
     "@emotion/styled": "^11",
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.33",
-    "@graphcommerce/framer-next-pages": "^9.1.0-canary.33",
-    "@graphcommerce/framer-scroller": "^9.1.0-canary.33",
-    "@graphcommerce/framer-utils": "^9.1.0-canary.33",
-    "@graphcommerce/image": "^9.1.0-canary.33",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.33",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.33",
+    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.35",
+    "@graphcommerce/framer-next-pages": "^9.1.0-canary.35",
+    "@graphcommerce/framer-scroller": "^9.1.0-canary.35",
+    "@graphcommerce/framer-utils": "^9.1.0-canary.35",
+    "@graphcommerce/image": "^9.1.0-canary.35",
+    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.35",
+    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.35",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/utils/cookie.ts

@@ -1,5 +1,10 @@
 import type { SerializeOptions } from 'cookie'
 import { parse, serialize } from 'cookie'
+import { motionValue } from 'framer-motion'
+import { useEffect, useState } from 'react'
+
+// We need this motionValue to be synced with the actual cookie store.
+const cookieNotify = motionValue<number>(0)
 
 /** Read a cookie */
 export function cookie(name: string): string | undefined
@@ -20,6 +25,7 @@ export function cookie(name: string, value?: string | null, options?: SerializeO
   if (typeof value === 'string') {
     const serialized = serialize(name, value, { path: '/', maxAge: 31536000, ...options })
     document.cookie = serialized
+    cookieNotify.set(cookieNotify.get() + 1)
     return undefined
   }
 
@@ -27,8 +33,24 @@ export function cookie(name: string, value?: string | null, options?: SerializeO
   if (value === null) {
     const serialized = serialize(name, '', { path: '/', maxAge: 0 })
     document.cookie = serialized
+    cookieNotify.set(cookieNotify.get() + 1)
     return undefined
   }
 
   return undefined
 }
+
+export function useCookie(name: string) {
+  const [value, setValue] = useState<string | null | undefined>(undefined)
+
+  useEffect(() => setValue(cookie(name)), [name])
+  useEffect(() => cookieNotify.on('change', () => setValue(cookie(name))))
+
+  const update = (val: string | null) => {
+    if (val) cookie(name, val, { sameSite: true })
+    else cookie(name, null)
+    cookieNotify.set(cookieNotify.get() + 1)
+  }
+
+  return [value, update] as const
+}

package/utils/cssFlags.tsx

@@ -35,10 +35,11 @@ export function getCssFlag(flagName: string) {
  * Example:
  *
  * ```tsx
- * ;<Box sx={{ [cssFlagSelector('dark')]: { color: 'white' } }} />
+ * ;<Box sx={{ [cssFlag('mode', 'dark')]: { color: 'white' } }} />
  * ```
  */
-export const cssFlag = <T extends string>(flagName: T) => `html[data-${flagName}] &` as const
+export const cssFlag = <T extends string>(flagName: T, val?: string) =>
+  `html[data-${flagName}${val ? `=${val}` : ''}] &` as const
 
 /**
  * Easily create a CSS selector that only applies when a flag is not set.
@@ -46,8 +47,8 @@ export const cssFlag = <T extends string>(flagName: T) => `html[data-${flagName}
  * Example:
  *
  * ```tsx
- * ;<Box sx={{ [cssNotFlagSelector('dark')]: { color: 'black' } }} />
+ * ;<Box sx={{ [cssNotFlag('mode', 'dark')]: { color: 'black' } }} />
  * ```
  */
-export const cssNotFlag = <T extends string>(flagName: T) =>
-  `html:not([data-${flagName}]) &` as const
+export const cssNotFlag = <T extends string>(flagName: T, val?: string) =>
+  `html:not([data-${flagName}${val ? `=${val}` : ''}]) &` as const