update DS to 3.72.1

package.json

@@ -41,7 +41,7 @@
     "@markdoc/next.js": "0.2.2",
     "@next/third-parties": "15.0.1",
     "@open-draft/until": "2.1.0",
-    "@pluralsh/design-system": "3.54.0",
+    "@pluralsh/design-system": "3.72.1",
     "@react-types/shared": "3.22.0",
     "@tanstack/react-table": "8.10.7",
     "@tanstack/react-virtual": "3.0.1",
@@ -67,14 +67,14 @@
     "octokit": "3.1.0",
     "query-string": "8.1.0",
     "raw-loader": "4.0.2",
-    "react": "18.2.0",
+    "react": "18.3.1",
     "react-add-to-calendar": "0.1.5",
     "react-aria": "3.31.1",
-    "react-dom": "18.2.0",
+    "react-dom": "18.3.1",
     "react-embed": "3.7.0",
     "react-github-btn": "1.4.0",
     "react-google-recaptcha": "3.1.0",
-    "react-is": "18.2.0",
+    "react-is": "18.3.1",
     "react-markdown": "9.0.1",
     "react-spring": "9.7.2",
     "react-transition-group": "4.4.5",
@@ -98,7 +98,7 @@
     "@pluralsh/stylelint-config": "2.0.10",
     "@radix-ui/react-slot": "1.0.2",
     "@types/node": "20.4.2",
-    "@types/react-dom": "18.2.7",
+    "@types/react-dom": "18.3.0",
     "@types/styled-components": "5.1.30",
     "@typescript-eslint/eslint-plugin": "7.0.1",
     "@typescript-eslint/parser": "7.0.1",

pages/index.tsx

@@ -111,16 +111,6 @@ export default function Homepage({
         <div
           className="relative h-0 w-full self-center pb-[56.25%]" /* 16:9 aspect ratio */
         >
-          <Button
-            className="left-1/2 top-full z-10 mt-large -translate-x-1/2"
-            large
-            floating
-            startIcon={<CloseIcon />}
-            onClick={() => setShowVideo(false)}
-            style={{ position: 'absolute' }}
-          >
-            Close
-          </Button>
           {pageData.hero_video_cta_url && (
             <iframe
               className="absolute left-0 top-0 h-full w-full rounded-large border border-fill-three"
@@ -131,6 +121,16 @@ export default function Homepage({
               allowFullScreen
             />
           )}
+          <Button
+            className="left-1/2 top-full z-10 mt-large -translate-x-1/2"
+            large
+            floating
+            startIcon={<CloseIcon />}
+            onClick={() => setShowVideo(false)}
+            style={{ position: 'absolute' }}
+          >
+            Close
+          </Button>
         </div>
       </BareModal>
     </>

src/components/BareModal.tsx

@@ -1,83 +1,51 @@
-import { type ComponentProps, forwardRef, useEffect, useState } from 'react'
+import { type ComponentProps, useCallback } from 'react'
 
 import { CloseIcon, IconFrame } from '@pluralsh/design-system'
-import { Modal } from 'honorable'
-
-import useLockedBody from '@pluralsh/design-system/dist/hooks/useLockedBody'
-import styled from 'styled-components'
-
-import { mqs } from '@src/breakpoints'
-
-export const BareModal = styled(
-  forwardRef<
-    any,
-    ComponentProps<typeof Modal> & { lockBody?: boolean; closeButton: boolean }
-  >(({ closeButton = true, lockBody = true, children, ...props }, ref) => {
-    const [hasMounted, setHasMounted] = useState(false)
-    const [, setBodyLocked] = useLockedBody(props.open && lockBody)
-
-    useEffect(() => setHasMounted(true), [])
-    useEffect(() => {
-      setBodyLocked(!!(lockBody && props?.open))
-    }, [lockBody, props.open, setBodyLocked])
-
-    if (!hasMounted) {
-      return null
-    }
-
-    return (
-      <Modal
-        ref={ref}
-        portal
-        BackdropProps={{
-          backgroundColor: 'rgba(23, 26, 33, 0.6)',
-          blur: '8px',
-        }}
-        {...props}
-      >
-        {closeButton && (
-          <IconFrame
-            className="closeButton"
-            type="floating"
-            clickable
-            icon={<CloseIcon />}
-            onClick={props.onClose}
-          />
-        )}
-        {children}
-      </Modal>
-    )
-  })
-)(({ theme, closeButton }) => ({
-  '.closeButton': { flexShrink: 0, marginLeft: 'auto' },
-  '&&': {
-    padding: 0,
-    margin: theme.spacing.medium,
-    background: 'none',
-    overflow: 'hidden',
-    border: 'none',
-    alignItems: 'start',
-    height: '100%',
-    gap: theme.spacing.small,
-    display: 'flex',
-    flexDirection: 'column',
-    boxShadow: 'none',
-    filter: `drop-shadow(${theme.boxShadows.modal})`,
-    [mqs.sm]: {
-      flexDirection: 'row-reverse',
-      ...(closeButton
-        ? {
-            paddingLeft: theme.spacing.medium + 32,
-            paddingRight: theme.spacing.medium + 32,
-
-            // translate: `${(theme.spacing.medium + 32) / 2}px 0`,
-            '.closeButton': {
-              position: 'absolute',
-              top: 0,
-              right: theme.spacing.xsmall,
-            },
-          }
-        : {}),
+import dynamic from 'next/dynamic'
+
+import * as Dialog from '@radix-ui/react-dialog'
+import { VisuallyHidden } from 'react-aria'
+
+const DynamicModalWrapper = dynamic(
+  () => import('@pluralsh/design-system').then((mod) => mod.ModalWrapper),
+  { ssr: false }
+)
+
+export function BareModal({
+  closeButton = true,
+  onClose,
+  children,
+  ...props
+}: Omit<ComponentProps<typeof DynamicModalWrapper>, 'onOpenChange'> & {
+  closeButton: boolean
+  onClose?: () => void
+}) {
+  const triggerClose = useCallback(
+    (open: boolean) => {
+      if (!open) onClose?.()
     },
-  },
-}))
+    [onClose]
+  )
+
+  return (
+    <DynamicModalWrapper
+      onOpenChange={triggerClose}
+      {...props}
+    >
+      {closeButton && (
+        <IconFrame
+          className="closeButton"
+          type="floating"
+          clickable
+          icon={<CloseIcon />}
+          onClick={triggerClose}
+        />
+      )}
+      {children}
+      {/* required for accessibility */}
+      <VisuallyHidden>
+        <Dialog.Title>Demo video</Dialog.Title>
+      </VisuallyHidden>
+    </DynamicModalWrapper>
+  )
+}

src/components/NavigationMobile.tsx

@@ -1,5 +1,6 @@
 import {
   Accordion,
+  AccordionItem,
   ArrowRightIcon,
   ArrowTopRightIcon,
   Button,
@@ -17,7 +18,7 @@ import { PlatformOverviewLinkSC } from './menu/Menu'
 import { MainLink, MainLinkBase, ProductMobileLink } from './Navigation'
 import { type NavContextValue, NavigationFull } from './NavigationFull'
 
-const MobileMainLink = styled(MainLink)(() => ({
+const MobileMainLink = styled(MainLink as any)(() => ({
   width: '100%',
   marginTop: 1,
 }))
@@ -67,53 +68,57 @@ function NavList({ navData }: { navData?: NavData | null }) {
 
         return (
           <Accordion
-            label={navItem?.link?.title}
             key={navItem.id}
-            // @ts-ignore
-            style={{ backgroundColor: theme.colors['fill-two'] }}
+            type="single"
           >
-            {navItem.link?.title === 'Product' && (
-              <div className="pl-small">
-                <PlatformOverviewLinkSC
-                  as={MainLinkBase}
-                  href="/product"
-                >
-                  <span>Plural Platform Overview</span>
-                  <ArrowTopRightIcon size={18} />
-                </PlatformOverviewLinkSC>
-              </div>
-            )}
-            {navItem.subnav?.map((subnavItem) => {
-              if (!subnavItem) {
-                return null
-              }
-
-              if (navItem.link?.title === 'Product') {
+            <AccordionItem
+              trigger={navItem?.link?.title}
+              // @ts-ignore
+              style={{ backgroundColor: theme.colors['fill-two'] }}
+            >
+              {navItem.link?.title === 'Product' && (
+                <div className="pl-small">
+                  <PlatformOverviewLinkSC
+                    as={MainLinkBase}
+                    href="/product"
+                  >
+                    <span>Plural Platform Overview</span>
+                    <ArrowTopRightIcon size={18} />
+                  </PlatformOverviewLinkSC>
+                </div>
+              )}
+              {navItem.subnav?.map((subnavItem) => {
+                if (!subnavItem) {
+                  return null
+                }
+
+                if (navItem.link?.title === 'Product') {
+                  return (
+                    <ProductMobileLink
+                      key={subnavItem.id}
+                      id={subnavItem.id}
+                      {...(subnavItem?.link?.url
+                        ? { href: subnavItem?.link.url }
+                        : {})}
+                    >
+                      {subnavItem?.link?.title}
+                    </ProductMobileLink>
+                  )
+                }
+
                 return (
-                  <ProductMobileLink
+                  <MobileMainLink
                     key={subnavItem.id}
-                    id={subnavItem.id}
                     {...(subnavItem?.link?.url
                       ? { href: subnavItem?.link.url }
                       : {})}
+                    style={{ padding: theme.spacing.medium }}
                   >
                     {subnavItem?.link?.title}
-                  </ProductMobileLink>
+                  </MobileMainLink>
                 )
-              }
-
-              return (
-                <MobileMainLink
-                  key={subnavItem.id}
-                  {...(subnavItem?.link?.url
-                    ? { href: subnavItem?.link.url }
-                    : {})}
-                  style={{ padding: theme.spacing.medium }}
-                >
-                  {subnavItem?.link?.title}
-                </MobileMainLink>
-              )
-            })}
+              })}
+            </AccordionItem>
           </Accordion>
         )
       })}

src/components/custom-page/MultiColumnText.tsx

@@ -1,41 +1,13 @@
-import createIcon from '@pluralsh/design-system/dist/components/icons/createIcon'
 import * as designSystemIcons from '@pluralsh/design-system/dist/icons'
 
 import * as productNavIcons from '@src/components/menu/ProductNavIcons'
 import { type MultiColumnTextComponentFragment } from '@src/generated/graphqlDirectus'
 
 import { Body1, Subtitle1 } from '../Typography'
 
-// TODO: StackRun icon very much temporary, need to update the DS in this repo soon
 export const icons = {
   ...productNavIcons,
   ...designSystemIcons,
-  StackRunIcon: createIcon(({ size, color }) => (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M14 4.89331L8 8.39331V1.39331L14 4.89331Z"
-        fill={color}
-        stroke={color}
-        strokeLinejoin="round"
-      />
-      <path
-        d="M2 7.78662L7.89923 11.2278C7.9615 11.2642 8.0385 11.2642 8.10077 11.2278L14 7.78662"
-        stroke={color}
-        strokeLinecap="round"
-      />
-      <path
-        d="M2 11.2866L7.89923 14.7278C7.9615 14.7642 8.0385 14.7642 8.10077 14.7278L14 11.2866"
-        stroke={color}
-        strokeLinecap="round"
-      />
-    </svg>
-  )),
 }
 
 export function MultiColumnText({ columns }: MultiColumnTextComponentFragment) {