agroptima-design-system 1.2.26-beta.3 → 1.2.26-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "1.2.26-beta.3",
+  "version": "1.2.26-beta.5",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Collapsible/Collapsible.scss

@@ -18,7 +18,7 @@ details summary::-webkit-details-marker {
     user-select: none;
   }
 
-  .collapsible-header {
+  > .collapsible-header {
     display: flex;
     align-items: center;
     gap: config.$space-3x;
@@ -32,7 +32,8 @@ details summary::-webkit-details-marker {
     }
   }
 
-  .collapsible-content {
+  > .collapsible-content {
+    display: none;
     padding: config.$space-7x config.$space-7x config.$space-3x;
 
     &.no-horizontal-padding {
@@ -41,14 +42,20 @@ details summary::-webkit-details-marker {
     }
   }
 
+  &.open {
+    > .collapsible-content {
+      display: block;
+    }
+
+    > .collapsible-header .collapsible-arrow {
+      transform: rotate(90deg);
+    }
+  }
+
   &.primary,
   &.secondary {
-  
-    
-  
-
     &.disabled {
-      .collapsible-header {
+      > .collapsible-header {
         background: var(--neutral-color-50);
         border-bottom: 1px solid var(--neutral-color-200);
         color: var(--neutral-color-200);
@@ -56,7 +63,7 @@ details summary::-webkit-details-marker {
       }
     }
 
-    .collapsible-header {
+    > .collapsible-header {
       color: var(--neutral-color-1000);
       background: transparent;
       border-bottom: 1px solid var(--neutral-color-200);
@@ -66,15 +73,14 @@ details summary::-webkit-details-marker {
         background: var(--primary-color-50);
       }
     }
-    &.open {
-        .collapsible-header {
-        background: transparent;
-        border-bottom: 3px solid var(--primary-color-600);
-      }
+
+    &.open > .collapsible-header {
+      background: transparent;
+      border-bottom: 3px solid var(--primary-color-600);
     }
   }
 
-  &.secondary .collapsible-content {
+  &.secondary > .collapsible-content {
     padding: config.$space-3x config.$space-4x config.$space-6x;
     border: 1px solid var(--neutral-color-200);
     border-top: none;
@@ -82,9 +88,3 @@ details summary::-webkit-details-marker {
     border-bottom-right-radius: config.$corner-radius-m;
   }
 }
-
-.collapsible.open {
-  .collapsible-arrow {
-    transform: rotate(90deg);
-  }
-}

package/src/atoms/Collapsible/Collapsible.tsx

@@ -1,5 +1,5 @@
 import './Collapsible.scss'
-import { type ComponentPropsWithoutRef, useEffect, useState } from 'react'
+import { type ComponentPropsWithoutRef, useState } from 'react'
 import { classNames } from '../../utils/classNames'
 import { Icon } from '../Icon'
 
@@ -23,13 +23,13 @@ export function Collapsible({
   name,
   form = false,
   noHorizontalPadding = false,
+  open,
+  onToggle,
   ...props
 }: CollapsibleProps) {
-  const [isOpen, setIsOpen] = useState(props.open)
+  const [expanded, setExpanded] = useState(false)
+  const isOpen = open !== undefined ? open : expanded
 
-  useEffect(() => {
-    setIsOpen(props.open)
-  }, [props.open])
   const cssClasses = classNames('collapsible', variant, className, {
     open: isOpen,
     disabled: disabled,
@@ -45,8 +45,8 @@ export function Collapsible({
       className={cssClasses}
       aria-label={title}
       onToggle={(e) => {
-        setIsOpen(e.currentTarget.open)
-        props.onToggle?.(e)
+        if (open === undefined) setExpanded(e.currentTarget.open)
+        onToggle?.(e)
       }}
       {...props}
     >