fix(accordion): fixed animated height calculation for keyframes

Author: thejackshelton

apps/website/src/global.css

@@ -12,6 +12,39 @@
   --light-color-bg: rgb(203 213 225);
   --light-color-text: #333;
 
+  @font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('/fonts/poppins-400.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
+      U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+
+  @font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('/fonts/poppins-500.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
+      U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+
+  @font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('/fonts/poppins-700.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
+      U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+
   --shadow-color: 0deg 0% 63%;
   --shadow-elevation-low: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.34),
     0.9px 1px 1.5px -1.2px hsl(var(--shadow-color) / 0.34),

apps/website/src/routes/layout-landing.tsx

@@ -11,16 +11,6 @@ import { OLD_APP_STATE_CONTEXT_ID } from '../constants';
 
 import { Footer } from '../components/footer/footer';
 
-import '@fontsource/poppins/100.css';
-import '@fontsource/poppins/200.css';
-import '@fontsource/poppins/300.css';
-import '@fontsource/poppins/400.css';
-import '@fontsource/poppins/500.css';
-import '@fontsource/poppins/600.css';
-import '@fontsource/poppins/700.css';
-import '@fontsource/poppins/800.css';
-import '@fontsource/poppins/900.css';
-
 export default component$(() => {
   // useStyles$(globalStyles);
 

apps/website/src/routes/layout.tsx

@@ -13,17 +13,6 @@ import {
 } from '../_state/component-statuses';
 import Header from '../components/header/header';
 
-// proper self-hosting of fonts at built
-import '@fontsource/poppins/100.css';
-import '@fontsource/poppins/200.css';
-import '@fontsource/poppins/300.css';
-import '@fontsource/poppins/400.css';
-import '@fontsource/poppins/500.css';
-import '@fontsource/poppins/600.css';
-import '@fontsource/poppins/700.css';
-import '@fontsource/poppins/800.css';
-import '@fontsource/poppins/900.css';
-
 export default component$(() => {
   useStyles$(prismStyles);
   useStyles$(docsStyles);

package.json

@@ -115,7 +115,6 @@
     "components library"
   ],
   "dependencies": {
-    "@fontsource/poppins": "5.0.5",
     "tslib": "^2.3.0"
   }
 }

packages/kit-headless/src/components/accordion/accordion-content.tsx

@@ -21,15 +21,19 @@ export type ContentProps = QwikIntrinsicElements['div'];
 
 export const AccordionContent = component$(({ ...props }: ContentProps) => {
   const contextService = useContext(accordionRootContextId);
+  const itemContext = useContext(accordionItemContextId);
+
   const ref = useSignal<HTMLElement>();
   const contentElement = ref.value;
-  const itemContext = useContext(accordionItemContextId);
   const contentId = `${itemContext.itemId}-content`;
-  const isTriggerExpandedSig = itemContext.isTriggerExpandedSig;
-  const isContentHiddenSig = useSignal<boolean>(true);
+
   const animated = contextService.animated;
+  const defaultValue = itemContext.defaultValue;
   const totalHeightSig = useSignal<number>(0);
 
+  const isTriggerExpandedSig = itemContext.isTriggerExpandedSig;
+  const isContentHiddenSig = useSignal<boolean>(!defaultValue);
+
   const hideContent$ = $(() => {
     if (!isTriggerExpandedSig.value) {
       isContentHiddenSig.value = true;
@@ -41,6 +45,10 @@ export const AccordionContent = component$(({ ...props }: ContentProps) => {
       overflow: hidden;
     }
 
+    [data-state="open"] {
+      display: block;
+    }
+
     /* check global.css utilites layer for animation */
     @keyframes accordion-open {
       0% {
@@ -71,13 +79,18 @@ export const AccordionContent = component$(({ ...props }: ContentProps) => {
   });
 
   /* calculates height of the content container based on children */
-  useVisibleTask$(function calculateHeightVisibleTask() {
-    if (animated) {
-      totalHeightSig.value = 0;
+  useVisibleTask$(function calculateHeightVisibleTask({ track }) {
+    track(() => isContentHiddenSig.value);
 
+    if (animated && totalHeightSig.value === 0) {
+      getCalculatedHeight();
+    }
+
+    function getCalculatedHeight() {
       const contentChildren = Array.from(
         contentElement?.children!
       ) as HTMLElement[];
+
       contentChildren.forEach((element, index) => {
         totalHeightSig.value += element.offsetHeight;
 

packages/kit-headless/src/components/accordion/accordion-item.tsx

@@ -20,10 +20,7 @@ export const AccordionItem = component$(
     const itemId = useId();
 
     const itemRef = useSignal<HTMLElement>();
-    const isTriggerExpandedSig = useSignal<boolean>(
-      defaultValue ? true : false
-    );
-    console.log(isTriggerExpandedSig.value);
+    const isTriggerExpandedSig = useSignal<boolean>(defaultValue);
 
     const itemContext: AccordionItemContext = {
       itemId,