@entur/expand 3.7.10 → 4.0.0-next.0

package/dist/styles.css

@@ -178,7 +178,7 @@
 }
 
 @media (prefers-reduced-motion){
-  .ReactCollapse--collapse{
+  .eds-base-expand{
     -webkit-transition:none !important;
     -o-transition:none !important;
     -moz-transition:none !important;
@@ -190,11 +190,21 @@
     -moz-transition:none !important;
     transition:none !important;
   }
-}.ReactCollapse--collapse{
-  -webkit-transition:height 0.5s ease-out;
-  -o-transition:height 0.5s ease-out;
-  -moz-transition:height 0.5s ease-out;
-  transition:height 0.5s ease-out;
+}.eds-base-expand{
+  display:grid;
+  grid-template-rows:0fr;
+  -webkit-transition:grid-template-rows 0.2s ease-out;
+  -o-transition:grid-template-rows 0.2s ease-out;
+  -moz-transition:grid-template-rows 0.2s ease-out;
+  transition:grid-template-rows 0.2s ease-out;
+  transition:grid-template-rows 0.2s ease-out, -ms-grid-rows 0.2s ease-out;
+}
+.eds-base-expand--open{
+  grid-template-rows:1fr;
+}
+.eds-base-expand__inner{
+  overflow:hidden;
+  min-height:0;
 }.eds-expandable-arrow{
   color:var(--components-expand-expandablepanel-standard-icon);
   -webkit-transition:0.2s -webkit-transform ease-out;
@@ -210,12 +220,12 @@
        -o-transform:rotate(-180deg);
           transform:rotate(-180deg);
 }
-.eds-contrast .eds-expandable-arrow{
+:where(.eds-contrast) .eds-expandable-arrow{
   color:var(--components-expand-expandablepanel-contrast-icon);
 }
 
-.eds-expandable-text--disable-animation .eds-expandable-arrow,
-.eds-expandable-panel--disable-animation .eds-expandable-arrow{
+.eds-expandable-text--disable-animation :where(.eds-expandable-arrow),
+.eds-expandable-panel--disable-animation :where(.eds-expandable-arrow){
   -webkit-transition:none;
   -o-transition:none;
   -moz-transition:none;
@@ -224,10 +234,10 @@
   width:100%;
   position:relative;
 }
-.eds-expandable-panel + .eds-expandable-panel{
+.eds-expandable-panel + :where(.eds-expandable-panel){
   margin-top:0.125rem;
 }
-.eds-expandable-panel:focus, .eds-expandable-panel:focus-within{
+.eds-expandable-panel:where(:focus, :focus-within){
   z-index:2;
 }
 .eds-expandable-panel__grid{
@@ -257,22 +267,22 @@
   width:100%;
   word-break:break-word;
 }
-.eds-contrast .eds-expandable-panel__trigger{
+:where(.eds-contrast) .eds-expandable-panel__trigger{
   background:var(--components-expand-expandablepanel-contrast-fill-default);
   color:var(--components-expand-expandablepanel-contrast-text);
 }
-.eds-expandable-panel__trigger:hover{
+.eds-expandable-panel__trigger:where(:hover){
   background:var(--components-expand-expandablepanel-standard-fill-hover);
 }
-.eds-contrast .eds-expandable-panel__trigger:hover{
+:where(.eds-contrast) .eds-expandable-panel__trigger:where(:hover){
   background:var(--components-expand-expandablepanel-contrast-fill-hover);
 }
-.eds-expandable-panel__trigger:focus-visible{
+.eds-expandable-panel__trigger:where(:focus-visible){
   outline:2px solid #181c56;
   outline-color:var(--basecolors-stroke-focus-standard);
   outline-offset:0.125rem;
 }
-.eds-contrast .eds-expandable-panel__trigger:focus-visible{
+:where(.eds-contrast) .eds-expandable-panel__trigger:where(:focus-visible){
   outline-color:var(--basecolors-stroke-focus-contrast);
 }
 .eds-expandable-panel__icon-container{
@@ -293,13 +303,7 @@
   overflow:auto;
   padding:1rem 1rem 1rem 1.5rem;
 }
-.eds-expandable-panel .ReactCollapse--collapse{
-  -webkit-transition:height 0.5s ease-out;
-  -o-transition:height 0.5s ease-out;
-  -moz-transition:height 0.5s ease-out;
-  transition:height 0.5s ease-out;
-}
-.eds-expandable-panel--disable-animation .ReactCollapse--collapse{
+.eds-expandable-panel--disable-animation :where(.eds-base-expand){
   -webkit-transition:none;
   -o-transition:none;
   -moz-transition:none;
@@ -325,18 +329,25 @@
      -moz-box-align:center;
           align-items:center;
 }
-.eds-contrast .eds-expandable-text__trigger{
+:where(.eds-contrast) .eds-expandable-text__trigger{
   color:var(--components-expand-expandabletext-contrast-text);
 }
-.eds-expandable-text__trigger > h5, .eds-expandable-text__trigger > h4, .eds-expandable-text__trigger > h3, .eds-expandable-text__trigger > h2, .eds-expandable-text__trigger > p{
+.eds-expandable-text__trigger > :where(h5, h4, h3, h2, p){
   margin-top:0;
   margin-bottom:0;
 }
-.eds-expandable-text__trigger:focus-visible{
+.eds-expandable-text__trigger:where(:focus-visible){
   outline:2px solid #181c56;
   outline-color:var(--basecolors-stroke-focus-standard);
   outline-offset:0.125rem;
 }
-.eds-contrast .eds-expandable-text__trigger:focus-visible{
+:where(.eds-contrast) .eds-expandable-text__trigger:where(:focus-visible){
   outline-color:var(--basecolors-stroke-focus-contrast);
+}
+
+.eds-expandable-text--disable-animation :where(.eds-base-expand){
+  -webkit-transition:none;
+  -o-transition:none;
+  -moz-transition:none;
+  transition:none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entur/expand",
-  "version": "3.7.10",
+  "version": "4.0.0-next.0",
   "license": "EUPL-1.2",
   "main": "dist/expand.cjs.js",
   "module": "dist/expand.esm.js",
@@ -22,22 +22,20 @@
     "test": "jest"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@entur/icons": "^9.0.2",
-    "@entur/tokens": "^3.23.0",
-    "@entur/typography": "^2.1.10",
-    "@entur/utils": "^0.13.5",
-    "classnames": "^2.5.1",
-    "react-collapse": "^5.1.1"
+    "@entur/icons": "^10.0.0-next.0",
+    "@entur/tokens": "^3.24.1-next.0",
+    "@entur/typography": "^3.0.0-next.0",
+    "@entur/utils": "^1.0.0-next.0",
+    "classnames": "^2.5.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^10.4.9",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "14.6.1",
-    "@types/react-collapse": "5.0.4",
     "@vitejs/plugin-react": "^5.0.1",
     "jest": "^29.0.0",
     "jest-environment-jsdom": "^29.0.0",
@@ -46,5 +44,5 @@
     "vite": "^7.3.2",
     "vite-plugin-dts": "^4.5.4"
   },
-  "gitHead": "0def581520c21bb535b0c66eac9b09ba12b44fb3"
+  "gitHead": "0f435bdeec98cc3cea1db7434b13b1f771a39a18"
 }