Add isExpanded to Section to replace collapsible (#1497)

* Add `isExpanded` to Section to replace `collapsible`

* Add to CHANGELOG

---------

Signed-off-by: Carson Katri <[email protected]>

Author: carson-katri

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 - Swift 6 is now required to build LiveView Native applications
+- `Section` now uses the `isExpanded` and `phx-change` attributes to enable collapsing in sidebar-styled `List` views
 
 ### Fixed
 

Sources/LiveViewNative/Views/Layout Containers/Collection Containers/Section.swift

@@ -37,16 +37,16 @@ import SwiftUI
 /// </Section>
 /// ```
 ///
-/// On macOS, ``ListStyle/sidebar`` can have collapsible sections. Use the ``collapsible`` attribute to make a section collapsible.
+/// On macOS, ``ListStyle/sidebar`` can have collapsible sections. Use the ``isExpanded`` attribute to make a section collapsible.
 ///
 /// ```html
-/// <Section collapsible>
+/// <Section isExpanded={@is_expanded} phx-change="expansion_changed">
 ///     ...
 /// </Section>
 /// ```
 ///
 /// ## Attributes
-/// * ``collapsible``
+/// * ``isExpanded``
 ///
 /// ## Children
 /// * `content` - The main body of the section.
@@ -55,34 +55,57 @@ import SwiftUI
 @_documentation(visibility: public)
 @LiveElement
 struct Section<Root: RootRegistry>: View {
-    /// Enables this section to be collapsed in sidebar lists on macOS.
+    /// Enables this section to be collapsed in sidebar lists.
     @_documentation(visibility: public)
-    private var collapsible: Bool = false
+    @ChangeTracked(attribute: .init(name: "isExpanded"))
+    private var isExpanded: Bool? = nil
 
-    public var body: some View {
-        SwiftUI.Section {
-            let elements = $liveElement.childNodes(in: "content", default: true)
-                .map { (node) -> ForEachElement in
-                    if let element = node.asElement(),
-                       let id = element.attributeValue(for: .init(name: "id"))
-                    {
-                        return .keyed(node, id: id)
-                    } else {
-                        return .unkeyed(node)
-                    }
+    var content: some View {
+        let elements = $liveElement.childNodes(in: "content", default: true)
+            .map { (node) -> ForEachElement in
+                if let element = node.asElement(),
+                   let id = element.attributeValue(for: .init(name: "id"))
+                {
+                    return .keyed(node, id: id)
+                } else {
+                    return .unkeyed(node)
                 }
-            ForEach(elements) { childNode in
-                ViewTreeBuilder<Root>.NodeView(node: childNode.node, context: $liveElement.context.storage)
-                    .trackListItemScrollOffset(id: childNode.id)
             }
-        } header: {
-            $liveElement.children(in: "header")
-        } footer: {
-            $liveElement.children(in: "footer")
+        return ForEach(elements) { childNode in
+            ViewTreeBuilder<Root>.NodeView(node: childNode.node, context: $liveElement.context.storage)
+                .trackListItemScrollOffset(id: childNode.id)
+        }
+    }
+    
+    var header: some View {
+        $liveElement.children(in: "header")
+    }
+    
+    var footer: some View {
+        $liveElement.children(in: "footer")
+    }
+    
+    public var body: some View {
+        if isExpanded != nil,
+           #available(iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0, visionOS 1.0, *)
+        {
+            SwiftUI.Section(isExpanded: Binding {
+                isExpanded ?? false
+            } set: {
+                isExpanded = $0
+            }) {
+                content
+            } header: {
+                header
+            }
+        } else {
+            SwiftUI.Section {
+                content
+            } header: {
+                header
+            } footer: {
+                footer
+            }
         }
-        #if os(macOS)
-            .collapsible(collapsible)
-        #endif
-        
     }
 }