From df39602758ae8dc3765bb48e51f7a657babfa559 Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <30633324+JarrodMFlesch@users.noreply.github.com>
Date: Fri, 9 Feb 2024 10:38:30 -0500
Subject: [PATCH] feat: exposes collapsible provider with more functionality
 (#5043)

---
 docs/admin/hooks.mdx                          | 35 +++++++++++++++++--
 .../components/elements/Collapsible/index.tsx | 16 +++++----
 .../elements/Collapsible/provider.tsx         | 33 +++++++++++++----
 .../forms/field-types/Group/index.tsx         |  6 ++--
 .../forms/field-types/Tabs/index.tsx          |  4 +--
 .../src/exports/components/utilities.ts       |  1 +
 6 files changed, 75 insertions(+), 20 deletions(-)

diff --git a/docs/admin/hooks.mdx b/docs/admin/hooks.mdx
index 3094b90902..4da4bd7e0d 100644
--- a/docs/admin/hooks.mdx
+++ b/docs/admin/hooks.mdx
@@ -635,6 +635,37 @@ export const CustomArrayManager = () => {
   ]}
 />
 
+### useCollapsible
+
+The `useCollapsible` hook allows you to control parent collapsibles:
+
+| Property                  | Description                                                                                                        |
+|---------------------------|--------------------------------------------------------------------------------------------------------------------|
+| **`collapsed`**          | State of the collapsible. `true` if open, `false` if collapsed                                                 |
+| **`isVisible`**              | If nested, determine if the nearest collapsible is visible. `true` if no parent is closed, `false` otherwise                                                        |
+| **`toggle`**                  | Toggles the state of the nearest collapsible                                                                |
+| **`withinCollapsible`**      | Determine when you are within another collaspible                                 |                                               |
+
+**Example:**
+
+```tsx
+import React from 'react'
+
+import { useCollapsible } from 'payload/components/utilities'
+
+const CustomComponent: React.FC = () => {
+  const { collapsed, toggle } = useCollapsible()
+  return (
+    <div>
+      <p className="field-type">I am {collapsed ? 'closed' : 'open'}</p>
+      <button onClick={toggle} type="button">
+        Toggle
+      </button>
+    </div>
+  )
+}
+```
+
 ### useDocumentInfo
 
 The `useDocumentInfo` hook provides lots of information about the document currently being edited, including the following:
@@ -774,8 +805,8 @@ const MyComponent: React.FC = () => {
   return (
     <>
       <span>The current theme is {theme} and autoMode is {autoMode}</span>
-      <button 
-        type="button" 
+      <button
+        type="button"
         onClick={() => setTheme(prev => prev === "light" ? "dark" : "light")}
       >
         Toggle theme
diff --git a/packages/payload/src/admin/components/elements/Collapsible/index.tsx b/packages/payload/src/admin/components/elements/Collapsible/index.tsx
index d86f2e2289..32d83b668d 100644
--- a/packages/payload/src/admin/components/elements/Collapsible/index.tsx
+++ b/packages/payload/src/admin/components/elements/Collapsible/index.tsx
@@ -24,11 +24,16 @@ export const Collapsible: React.FC<Props> = ({
 }) => {
   const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed))
   const [hoveringToggle, setHoveringToggle] = useState(false)
-  const isNested = useCollapsible()
+  const { withinCollapsible } = useCollapsible()
   const { t } = useTranslation('fields')
 
   const collapsed = typeof collapsedFromProps === 'boolean' ? collapsedFromProps : collapsedLocal
 
+  const toggleCollapsible = React.useCallback(() => {
+    if (typeof onToggle === 'function') onToggle(!collapsed)
+    setCollapsedLocal(!collapsed)
+  }, [onToggle, collapsed])
+
   return (
     <div
       className={[
@@ -36,14 +41,14 @@ export const Collapsible: React.FC<Props> = ({
         className,
         dragHandleProps && `${baseClass}--has-drag-handle`,
         collapsed && `${baseClass}--collapsed`,
-        isNested && `${baseClass}--nested`,
+        withinCollapsible && `${baseClass}--nested`,
         hoveringToggle && `${baseClass}--hovered`,
         `${baseClass}--style-${collapsibleStyle}`,
       ]
         .filter(Boolean)
         .join(' ')}
     >
-      <CollapsibleProvider>
+      <CollapsibleProvider collapsed={collapsed} toggle={toggleCollapsible}>
         <div
           className={`${baseClass}__toggle-wrap`}
           onMouseEnter={() => setHoveringToggle(true)}
@@ -65,10 +70,7 @@ export const Collapsible: React.FC<Props> = ({
             ]
               .filter(Boolean)
               .join(' ')}
-            onClick={() => {
-              if (typeof onToggle === 'function') onToggle(!collapsed)
-              setCollapsedLocal(!collapsed)
-            }}
+            onClick={toggleCollapsible}
             type="button"
           >
             <span>{t('toggleBlock')}</span>
diff --git a/packages/payload/src/admin/components/elements/Collapsible/provider.tsx b/packages/payload/src/admin/components/elements/Collapsible/provider.tsx
index cf6db8b5e2..6fcd1e03c9 100644
--- a/packages/payload/src/admin/components/elements/Collapsible/provider.tsx
+++ b/packages/payload/src/admin/components/elements/Collapsible/provider.tsx
@@ -1,14 +1,35 @@
 import React, { createContext, useContext } from 'react'
 
-const Context = createContext(false)
+type ContextType = {
+  collapsed: boolean
+  isVisible: boolean
+  toggle: () => void
+  withinCollapsible: boolean
+}
+const Context = createContext({
+  collapsed: false,
+  isVisible: true,
+  toggle: () => {},
+  withinCollapsible: true,
+})
 
 export const CollapsibleProvider: React.FC<{
   children?: React.ReactNode
+  collapsed?: boolean
+  toggle: () => void
   withinCollapsible?: boolean
-}> = ({ children, withinCollapsible = true }) => {
-  return <Context.Provider value={withinCollapsible}>{children}</Context.Provider>
+}> = ({ children, collapsed, toggle, withinCollapsible = true }) => {
+  const { collapsed: parentIsCollapsed, isVisible } = useCollapsible()
+
+  const contextValue = React.useMemo((): ContextType => {
+    return {
+      collapsed: Boolean(collapsed),
+      isVisible: isVisible && !parentIsCollapsed,
+      toggle,
+      withinCollapsible,
+    }
+  }, [collapsed, withinCollapsible, toggle, parentIsCollapsed, isVisible])
+  return <Context.Provider value={contextValue}>{children}</Context.Provider>
 }
 
-export const useCollapsible = (): boolean => useContext(Context)
-
-export default Context
+export const useCollapsible = (): ContextType => useContext(Context)
diff --git a/packages/payload/src/admin/components/forms/field-types/Group/index.tsx b/packages/payload/src/admin/components/forms/field-types/Group/index.tsx
index 420db37fcb..bab5cd6edf 100644
--- a/packages/payload/src/admin/components/forms/field-types/Group/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Group/index.tsx
@@ -33,7 +33,7 @@ const Group: React.FC<Props> = (props) => {
     permissions,
   } = props
 
-  const isWithinCollapsible = useCollapsible()
+  const { withinCollapsible } = useCollapsible()
   const isWithinGroup = useGroup()
   const isWithinRow = useRow()
   const isWithinTab = useTabs()
@@ -43,7 +43,7 @@ const Group: React.FC<Props> = (props) => {
   const groupHasErrors = submitted && errorCount > 0
 
   const path = pathFromProps || name
-  const isTopLevel = !(isWithinCollapsible || isWithinGroup || isWithinRow)
+  const isTopLevel = !(withinCollapsible || isWithinGroup || isWithinRow)
 
   return (
     <div
@@ -51,7 +51,7 @@ const Group: React.FC<Props> = (props) => {
         fieldBaseClass,
         baseClass,
         isTopLevel && `${baseClass}--top-level`,
-        isWithinCollapsible && `${baseClass}--within-collapsible`,
+        withinCollapsible && `${baseClass}--within-collapsible`,
         isWithinGroup && `${baseClass}--within-group`,
         isWithinRow && `${baseClass}--within-row`,
         isWithinTab && `${baseClass}--within-tab`,
diff --git a/packages/payload/src/admin/components/forms/field-types/Tabs/index.tsx b/packages/payload/src/admin/components/forms/field-types/Tabs/index.tsx
index 62d2ecf557..942f8f3e17 100644
--- a/packages/payload/src/admin/components/forms/field-types/Tabs/index.tsx
+++ b/packages/payload/src/admin/components/forms/field-types/Tabs/index.tsx
@@ -83,7 +83,7 @@ const TabsField: React.FC<Props> = (props) => {
   const { preferencesKey } = useDocumentInfo()
   const { i18n } = useTranslation()
 
-  const isWithinCollapsible = useCollapsible()
+  const { withinCollapsible } = useCollapsible()
   const [activeTabIndex, setActiveTabIndex] = useState<number>(0)
   const tabsPrefKey = `tabs-${indexPath}`
 
@@ -138,7 +138,7 @@ const TabsField: React.FC<Props> = (props) => {
         fieldBaseClass,
         className,
         baseClass,
-        isWithinCollapsible && `${baseClass}--within-collapsible`,
+        withinCollapsible && `${baseClass}--within-collapsible`,
       ]
         .filter(Boolean)
         .join(' ')}
diff --git a/packages/payload/src/exports/components/utilities.ts b/packages/payload/src/exports/components/utilities.ts
index 8d06be212f..b16f429236 100644
--- a/packages/payload/src/exports/components/utilities.ts
+++ b/packages/payload/src/exports/components/utilities.ts
@@ -1,3 +1,4 @@
+export { useCollapsible } from '../../admin/components/elements/Collapsible/provider'
 export { default as buildStateFromSchema } from '../../admin/components/forms/Form/buildStateFromSchema'
 export { useAuth } from '../../admin/components/utilities/Auth'
 export { useConfig } from '../../admin/components/utilities/Config'