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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/atoms/Collapsible/Collapsible.scss +15 -15
  3. package/src/atoms/Collapsible/Collapsible.tsx +21 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "agroptima-design-system",
3
- "version": "1.2.26-beta.2",
3
+ "version": "1.2.26-beta.4",
4
4
  "scripts": {
5
5
  "dev": "npm run storybook",
6
6
  "storybook": "storybook dev -p 6006 --ci",
package/src/atoms/Collapsible/Collapsible.scss CHANGED
@@ -33,6 +33,7 @@ details summary::-webkit-details-marker {
33
33
  }
34
34
 
35
35
  .collapsible-content {
36
+ display: none;
36
37
  padding: config.$space-7x config.$space-7x config.$space-3x;
37
38
 
38
39
  &.no-horizontal-padding {
@@ -41,12 +42,18 @@ details summary::-webkit-details-marker {
41
42
  }
42
43
  }
43
44
 
45
+ &.open {
46
+ .collapsible-content {
47
+ display: block;
48
+ }
49
+
50
+ .collapsible-arrow {
51
+ transform: rotate(90deg);
52
+ }
53
+ }
54
+
44
55
  &.primary,
45
56
  &.secondary {
46
-
47
-
48
-
49
-
50
57
  &.disabled {
51
58
  .collapsible-header {
52
59
  background: var(--neutral-color-50);
@@ -66,11 +73,10 @@ details summary::-webkit-details-marker {
66
73
  background: var(--primary-color-50);
67
74
  }
68
75
  }
69
- &.open {
70
- .collapsible-header {
71
- background: transparent;
72
- border-bottom: 3px solid var(--primary-color-600);
73
- }
76
+
77
+ &.open .collapsible-header {
78
+ background: transparent;
79
+ border-bottom: 3px solid var(--primary-color-600);
74
80
  }
75
81
  }
76
82
 
@@ -82,9 +88,3 @@ details summary::-webkit-details-marker {
82
88
  border-bottom-right-radius: config.$corner-radius-m;
83
89
  }
84
90
  }
85
-
86
- .collapsible.open {
87
- .collapsible-arrow {
88
- transform: rotate(90deg);
89
- }
90
- }
package/src/atoms/Collapsible/Collapsible.tsx CHANGED
@@ -1,6 +1,10 @@
1
1
  import './Collapsible.scss'
2
- import type { ComponentPropsWithoutRef } from 'react'
3
- import { useState } from 'react'
2
+ import {
3
+ type ComponentPropsWithoutRef,
4
+ useEffect,
5
+ useRef,
6
+ useState,
7
+ } from 'react'
4
8
  import { classNames } from '../../utils/classNames'
5
9
  import { Icon } from '../Icon'
6
10
 
@@ -13,7 +17,6 @@ export interface CollapsibleProps extends ComponentPropsWithoutRef<'details'> {
13
17
  disabled?: boolean
14
18
  form?: boolean
15
19
  noHorizontalPadding?: boolean
16
- open?: boolean
17
20
  }
18
21
 
19
22
  export function Collapsible({
@@ -25,11 +28,22 @@ export function Collapsible({
25
28
  name,
26
29
  form = false,
27
30
  noHorizontalPadding = false,
28
- open = false,
31
+ open,
29
32
  onToggle,
30
33
  ...props
31
34
  }: CollapsibleProps) {
32
- const [isOpen, setIsOpen] = useState(open)
35
+ const detailsRef = useRef<HTMLDetailsElement>(null)
36
+ const [isOpen, setIsOpen] = useState(open ?? false)
37
+ const [prevOpen, setPrevOpen] = useState(open)
38
+
39
+ if (prevOpen !== open) {
40
+ setPrevOpen(open)
41
+ setIsOpen(open ?? false)
42
+ }
43
+
44
+ useEffect(() => {
45
+ if (detailsRef.current) detailsRef.current.open = isOpen
46
+ }, [isOpen])
33
47
 
34
48
  const cssClasses = classNames('collapsible', variant, className, {
35
49
  open: isOpen,
@@ -39,9 +53,10 @@ export function Collapsible({
39
53
  'no-horizontal-padding': noHorizontalPadding,
40
54
  form: form,
41
55
  })
42
- console.log('isOpen', isOpen)
56
+
43
57
  return (
44
58
  <details
59
+ ref={detailsRef}
45
60
  name={name}
46
61
  className={cssClasses}
47
62
  aria-label={title}