feat(collapse): allow hiding caret and lock state when controlled

Author: abelflopes

packages/components/base/src/collapse/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./styles/index.module.scss";
 import { Icon } from "@react-ck/icon";
 import { IconChevronDown } from "@react-ck/icon/icons/IconChevronDown";
@@ -26,6 +26,10 @@ export interface CollapseProps extends React.DetailsHTMLAttributes<HTMLDetailsEl
    * @default false
    */
   keepInDom?: boolean;
+  /** Whether to show the caret icon.
+   * @default true
+   */
+  showCaret?: boolean;
 }
 
 /**
@@ -47,30 +51,41 @@ export interface CollapseProps extends React.DetailsHTMLAttributes<HTMLDetailsEl
  */
 
 export const Collapse = ({
+  open,
   header,
   children,
-  onToggle,
   onOpenChange,
   spacing = "s",
   className,
   keepInDom,
+  showCaret = true,
   ...otherProps
 }: Readonly<CollapseProps>): React.ReactElement => {
-  const [internalOpen, setInternalOpen] = useState(otherProps.open);
+  const [internalOpen, setInternalOpen] = useState(open);
+
+  useEffect(() => {
+    if (open !== undefined) setInternalOpen(open);
+  }, [open]);
 
   return (
     <details
       {...otherProps}
-      className={classNames(className, styles[`spacing_${spacing}`])}
-      onToggle={(e) => {
-        setInternalOpen(e.currentTarget.open);
-        onOpenChange?.(e.currentTarget.open);
-        onToggle?.(e);
-      }}>
-      <summary className={classNames(styles.header, internalOpen && styles.header_open)}>
-        <Icon>
-          <IconChevronDown className={classNames(styles.icon, internalOpen && styles.icon_open)} />
-        </Icon>
+      open={internalOpen}
+      className={classNames(className, styles[`spacing_${spacing}`])}>
+      <summary
+        className={classNames(styles.header, internalOpen && styles.header_open)}
+        onClick={(e) => {
+          e.preventDefault();
+          if (open === undefined) setInternalOpen(!internalOpen);
+          onOpenChange?.(!internalOpen);
+        }}>
+        {showCaret && (
+          <Icon>
+            <IconChevronDown
+              className={classNames(styles.icon, internalOpen && styles.icon_open)}
+            />
+          </Icon>
+        )}
 
         <div className={styles.header_content}>{header}</div>
       </summary>