From dfd7513198b6507032447e9e54c34c26aa63ba1f Mon Sep 17 00:00:00 2001
From: Ludwig Hubert <ludwig.hubert@capgemini.com>
Date: Fri, 24 Apr 2020 14:18:59 +0200
Subject: [PATCH 1/2] Fixes
 https://github.com/glennflanagan/react-collapsible/issues/99 and adds wrapper
 around trigger and "non clickable trigger" for styling possibility.

---
 src/Collapsible.js | 44 ++++++++++++++++++++++++--------------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/Collapsible.js b/src/Collapsible.js
index 965a5c5..f5bc638 100644
--- a/src/Collapsible.js
+++ b/src/Collapsible.js
@@ -124,10 +124,11 @@ class Collapsible extends Component {
       return (
         <span className={`${this.props.classParentString}__trigger-sibling`}>{this.props.triggerSibling}</span>
       )
-    } else if (this.props.triggerSibling) {
-      return <this.props.triggerSibling />
+    } else if (typeof this.props.triggerSibling === 'object') {
+        return this.props.triggerSibling
+    } else if (typeof this.props.triggerSibling === 'function') {
+        return <this.props.triggerSibling />
     }
-
     return null;
   }
 
@@ -179,6 +180,7 @@ class Collapsible extends Component {
       && !this.state.inTransition ? null : this.props.children;
 
     // Construct CSS classes strings
+    const headerClassString = `${this.props.classParentString}__header`;
     const triggerClassString = `${this.props.classParentString}__trigger ${openClass} ${disabledClass} ${
       this.state.isClosed ? this.props.triggerClassName : this.props.triggerOpenedClassName
       }`;
@@ -190,23 +192,25 @@ class Collapsible extends Component {
 
     return (
       <ContentContainerElement className={parentClassString.trim()} {...this.props.containerElementProps} >
-        <TriggerElement
-          className={triggerClassString.trim()}
-          onClick={this.handleTriggerClick}
-          style={this.props.triggerStyle && this.props.triggerStyle}
-          onKeyPress={(event) => {
-            const { key } = event;
-            if (key === ' ' || key === 'Enter') {
-              this.handleTriggerClick(event);
-            }
-          }}
-          tabIndex={this.props.tabIndex && this.props.tabIndex}
-          {...this.props.triggerElementProps}
-        >
-          {trigger}
-        </TriggerElement>
-
-        {this.renderNonClickableTriggerElement()}
+        <div className={headerClassString}>
+            <TriggerElement
+              className={triggerClassString.trim()}
+              onClick={this.handleTriggerClick}
+              style={this.props.triggerStyle && this.props.triggerStyle}
+              onKeyPress={(event) => {
+                const { key } = event;
+                if (key === ' ' || key === 'Enter') {
+                  this.handleTriggerClick(event);
+                }
+              }}
+              tabIndex={this.props.tabIndex && this.props.tabIndex}
+              {...this.props.triggerElementProps}
+            >
+              {trigger}
+            </TriggerElement>
+
+            {this.renderNonClickableTriggerElement()}
+        </div>
 
         <div
           className={outerClassString.trim()}

From 9b1c764fc990b2159fb962402ed88ec7f06f19e9 Mon Sep 17 00:00:00 2001
From: Ludwig Hubert <ludwig.hubert@capgemini.com>
Date: Fri, 24 Apr 2020 14:23:07 +0200
Subject: [PATCH 2/2] Added proper typings to make triggerSibling work with
 typescript.

---
 index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.d.ts b/index.d.ts
index 07e1dcf..c9a569a 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -33,7 +33,7 @@ export interface CollapsibleProps extends React.HTMLProps<Collapsible> {
     | "inherit"
     | "initial"
     | "unset";
-  triggerSibling?: React.ReactElement<any>;
+  triggerSibling?: string | React.ReactElement<any> | function;
   className?: string;
   tabIndex?: number;
   contentContainerTagName?: string;