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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "1.2.26-beta.4",
+  "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,7 @@ details summary::-webkit-details-marker {
     }
   }
 
-  .collapsible-content {
+  > .collapsible-content {
     display: none;
     padding: config.$space-7x config.$space-7x config.$space-3x;
 
@@ -43,11 +43,11 @@ details summary::-webkit-details-marker {
   }
 
   &.open {
-    .collapsible-content {
+    > .collapsible-content {
       display: block;
     }
 
-    .collapsible-arrow {
+    > .collapsible-header .collapsible-arrow {
       transform: rotate(90deg);
     }
   }
@@ -55,7 +55,7 @@ details summary::-webkit-details-marker {
   &.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);
@@ -63,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);
@@ -74,13 +74,13 @@ details summary::-webkit-details-marker {
       }
     }
 
-    &.open .collapsible-header {
+    &.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;

package/src/atoms/Collapsible/Collapsible.tsx

@@ -1,10 +1,5 @@
 import './Collapsible.scss'
-import {
-  type ComponentPropsWithoutRef,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
+import { type ComponentPropsWithoutRef, useState } from 'react'
 import { classNames } from '../../utils/classNames'
 import { Icon } from '../Icon'
 
@@ -32,18 +27,8 @@ export function Collapsible({
   onToggle,
   ...props
 }: CollapsibleProps) {
-  const detailsRef = useRef<HTMLDetailsElement>(null)
-  const [isOpen, setIsOpen] = useState(open ?? false)
-  const [prevOpen, setPrevOpen] = useState(open)
-
-  if (prevOpen !== open) {
-    setPrevOpen(open)
-    setIsOpen(open ?? false)
-  }
-
-  useEffect(() => {
-    if (detailsRef.current) detailsRef.current.open = isOpen
-  }, [isOpen])
+  const [expanded, setExpanded] = useState(false)
+  const isOpen = open !== undefined ? open : expanded
 
   const cssClasses = classNames('collapsible', variant, className, {
     open: isOpen,
@@ -56,12 +41,11 @@ export function Collapsible({
 
   return (
     <details
-      ref={detailsRef}
       name={name}
       className={cssClasses}
       aria-label={title}
       onToggle={(e) => {
-        setIsOpen(e.currentTarget.open)
+        if (open === undefined) setExpanded(e.currentTarget.open)
         onToggle?.(e)
       }}
       {...props}