@energysage/es-ds-components 4.1.0 → 4.1.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [4.1.1](https://github.com/EnergySage/es-ds/compare/es-ds-components-v4.1.0...es-ds-components-v4.1.1) (2026-02-10)
+
+
+### Bug Fixes
+
+* EsCollapse animation bug and arrow overlap issue ([#1698](https://github.com/EnergySage/es-ds/issues/1698)) ([a87aba7](https://github.com/EnergySage/es-ds/commit/a87aba7e47b0dffebadfefa43f0a7a3dfa6e074f))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * dependencies
+    * @energysage/es-ds-styles bumped from ^3.3.1 to ^3.3.2
+
 ## [4.1.0](https://github.com/EnergySage/es-ds/compare/es-ds-components-v4.0.3...es-ds-components-v4.1.0) (2026-01-12)
 
 

package/app/components/es-collapse.vue

@@ -1,96 +1,144 @@
 <script setup lang="ts">
-import Panel from 'primevue/panel';
+import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'reka-ui';
 
-const emit = defineEmits(['toggled', 'userClick']);
-
-const model = defineModel<boolean>();
-const props = defineProps({
-    border: {
-        type: Boolean,
-        default: true,
-    },
-    isProgrammaticUntilUserInput: {
-        type: Boolean,
-        default: true,
-    },
-    visible: {
-        type: Boolean,
-        default: false,
-    },
+interface Props {
+    border?: boolean;
+    isProgrammaticUntilUserInput?: boolean;
+    triggerClass?: string;
+    visible?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+    border: true,
+    isProgrammaticUntilUserInput: true,
+    triggerClass: 'text-body',
+    visible: false,
 });
 
+const emit = defineEmits(['toggled', 'userClick']);
+const model = defineModel<boolean>();
 const userDeterminedState: Ref<boolean | null> = ref(null);
-const uniqueId = useId();
 
 // directly determines the expanded/collapsed state of the panel
-const expanded = computed(() => {
+const expanded = computed((oldValue: boolean | undefined) => {
+    let newValue = !!oldValue;
+
     // if we are meant to start ignoring the programmatic incoming state as soon as the
     // user interacts with the collapse, and if the user has interacted with the collapse,
     // use the value from the user's interaction
     if (props.isProgrammaticUntilUserInput && userDeterminedState.value !== null) {
-        return userDeterminedState.value;
+        newValue = userDeterminedState.value;
+    } else {
+        // otherwise, use the one-way visible prop or the two-way v-model value
+        newValue = props.visible || !!model.value;
+    }
+
+    // if the truthiness of the value has changed, emit event indicating the state has changed
+    if (!!oldValue !== !!newValue) {
+        emit('toggled', newValue);
     }
 
-    // otherwise, use the one-way visible prop or the two-way v-model value
-    return props.visible || model.value;
+    return newValue;
 });
 
-const onClick = ({ value }: { value: boolean }) => {
+const onClick = (value: boolean) => {
     // save the state toggled by the user
     // convert from "collapsed" semantics internal to the primevue panel
     // to the "expanded" semantics exposed by this component
-    userDeterminedState.value = !value;
+    userDeterminedState.value = value;
 
     // inform the v-model (if any) that the state has changed
-    model.value = !value;
+    model.value = value;
 
-    // emit events indicating the state has changed
-    emit('toggled', !value);
-    emit('userClick', !value);
+    // emit event indicating the state has changed from a user click
+    emit('userClick', value);
 };
 </script>
 
 <template>
-    <panel
-        :collapsed="!expanded"
-        :toggle-button-props="{ 'aria-labelledby': uniqueId }"
-        :pt="{
-            header: 'd-flex flex-column justify-content-center position-relative py-100',
-            icons: 'h-100 position-absolute w-100',
-            root: border ? 'border-bottom border-top' : '',
-            toggler: {
-                // eslint-disable-next-line max-len
-                class: 'es-collapse-toggler align-items-center btn btn-link d-flex h-100 inline justify-content-end rounded-0 p-0 position-absolute text-body w-100',
-            },
-            // https://vuejs.org/guide/built-ins/transition
-            transition: {
-                enterActiveClass: 'es-collapse-enter-active',
-                enterFromClass: 'es-collapse-enter-from',
-                enterToClass: 'es-collapse-enter-to',
-                leaveActiveClass: 'es-collapse-leave-active',
-                leaveFromClass: 'es-collapse-leave-from',
-                leaveToClass: 'es-collapse-leave-to',
-            },
+    <collapsible-root
+        :class="{
+            'border-bottom border-top': border,
         }"
-        toggleable
-        @toggle="onClick">
-        <template #header>
-            <div :id="uniqueId">
+        :open="expanded"
+        :unmount-on-hide="false"
+        @update:open="onClick">
+        <collapsible-trigger
+            class="es-collapse-trigger d-flex justify-content-between text-left position-relative py-100 w-100"
+            :class="triggerClass">
+            <div class="pr-200">
                 <slot name="title" />
             </div>
-        </template>
-        <template #togglericon>
-            <icon-chevron-down />
-        </template>
-        <slot />
-    </panel>
+            <div class="es-collapse-icon-container position-absolute">
+                <icon-chevron-down class="es-collapse-icon" />
+            </div>
+        </collapsible-trigger>
+        <collapsible-content class="es-collapse-content overflow-hidden">
+            <slot />
+        </collapsible-content>
+    </collapsible-root>
 </template>
+
 <style lang="scss" scoped>
 @use '@energysage/es-ds-styles/scss/variables' as variables;
 
-:deep(.es-collapse-toggler:focus-visible) {
-    outline: 2px auto variables.$blue-600;
-    outline: 2px auto -webkit-focus-ring-color;
-    outline-offset: 2px;
+$animation-duration: 0.3s;
+$easing-function: cubic-bezier(0.87, 0, 0.13, 1);
+
+@keyframes slideDown {
+    0% {
+        height: 0;
+    }
+    100% {
+        height: var(--reka-collapsible-content-height);
+    }
+}
+
+@keyframes slideUp {
+    0% {
+        height: var(--reka-collapsible-content-height);
+    }
+    100% {
+        height: 0;
+    }
+}
+
+.es-collapse-trigger {
+    background: none;
+    border: 0;
+    padding: 0;
+
+    &:focus-visible {
+        outline: 2px auto variables.$blue-600;
+        outline: 2px auto -webkit-focus-ring-color;
+        outline-offset: 4px;
+    }
+
+    .es-collapse-icon-container {
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    &[data-state='open'] .es-collapse-icon {
+        transform: rotate(180deg);
+    }
+
+    @media not (prefers-reduced-motion) {
+        .es-collapse-icon {
+            transition: transform $animation-duration $easing-function;
+        }
+    }
+}
+
+.es-collapse-content {
+    @media not (prefers-reduced-motion) {
+        &[data-state='closed'] {
+            animation: slideUp $animation-duration $easing-function;
+        }
+
+        &[data-state='open'] {
+            animation: slideDown $animation-duration $easing-function;
+        }
+    }
 }
 </style>

package/app/components/es-popover.vue

@@ -20,52 +20,47 @@ withDefaults(defineProps<IProps>(), {
 });
 
 const emit = defineEmits(['update:show']);
-
-// Workaround: Reka UI components don't play nice with the Nuxt 3.16+ dev server side rendering while using NPM link
-const wrappingComponent = import.meta.dev ? resolveComponent('ClientOnly') : 'span';
 </script>
 
 <template>
-    <component :is="wrappingComponent">
-        <popover-root
-            :open="show"
-            @update:open="(val) => emit('update:show', val)">
-            <popover-trigger
-                class="es-popover-trigger p-0"
-                :class="{ [triggerClass]: true }">
-                <span class="sr-only">{{ triggerDescription }}</span>
-                <slot name="trigger" />
-            </popover-trigger>
-            <popover-portal>
-                <popover-content
-                    class="es-popover-content position-relative"
-                    :class="{
-                        'text-white': variant === 'dark',
-                        'es-popover-content--light': variant === 'light',
-                    }"
-                    :collision-padding="collisionPadding"
-                    :side="side">
-                    <popover-close
-                        class="es-popover-close align-items-center d-flex justify-content-center float-right mb-50 ml-50 position-relative"
-                        :class="{ 'es-popover-close--light': variant === 'light' }">
-                        <span class="sr-only">Close</span>
-                        <icon-x
-                            height="20px"
-                            width="20px" />
-                    </popover-close>
-                    <popover-arrow
-                        class="es-popover-arrow"
-                        :class="{ 'es-popover-arrow--light': variant === 'light' }"
-                        :height="12"
-                        rounded
-                        :width="22" />
-                    <slot />
-                    <!-- the cta slot is kept for backwards compatibility but is deprecated -->
-                    <slot name="cta" />
-                </popover-content>
-            </popover-portal>
-        </popover-root>
-    </component>
+    <popover-root
+        :open="show"
+        @update:open="(val) => emit('update:show', val)">
+        <popover-trigger
+            class="es-popover-trigger p-0"
+            :class="{ [triggerClass]: true }">
+            <span class="sr-only">{{ triggerDescription }}</span>
+            <slot name="trigger" />
+        </popover-trigger>
+        <popover-portal>
+            <popover-content
+                class="es-popover-content position-relative"
+                :class="{
+                    'text-white': variant === 'dark',
+                    'es-popover-content--light': variant === 'light',
+                }"
+                :collision-padding="collisionPadding"
+                :side="side">
+                <popover-close
+                    class="es-popover-close align-items-center d-flex justify-content-center float-right mb-50 ml-50 position-relative"
+                    :class="{ 'es-popover-close--light': variant === 'light' }">
+                    <span class="sr-only">Close</span>
+                    <icon-x
+                        height="20px"
+                        width="20px" />
+                </popover-close>
+                <popover-arrow
+                    class="es-popover-arrow"
+                    :class="{ 'es-popover-arrow--light': variant === 'light' }"
+                    :height="12"
+                    rounded
+                    :width="22" />
+                <slot />
+                <!-- the cta slot is kept for backwards compatibility but is deprecated -->
+                <slot name="cta" />
+            </popover-content>
+        </popover-portal>
+    </popover-root>
 </template>
 
 <style lang="scss" scoped>

package/app/components/es-toggle.vue

@@ -17,34 +17,29 @@ interface Props {
 withDefaults(defineProps<Props>(), {
     disabled: false,
 });
-
-// Workaround: Reka UI components don't play nice with the Nuxt 3.16+ dev server side rendering while using NPM link
-const wrappingComponent = import.meta.dev ? resolveComponent('ClientOnly') : 'div';
 </script>
 
 <template>
-    <component :is="wrappingComponent">
-        <div
-            class="d-flex flex-row"
-            :class="{
-                'has-label': $slots.label,
-            }"
-            v-bind="$attrs">
-            <switch-root
-                :id="switchId"
-                v-model="model"
-                :disabled="disabled"
-                class="es-toggle">
-                <switch-thumb class="es-toggle-thumb" />
-            </switch-root>
-            <label
-                v-if="$slots.label"
-                :for="switchId"
-                class="es-toggle-label">
-                <slot name="label" />
-            </label>
-        </div>
-    </component>
+    <div
+        class="d-flex flex-row"
+        :class="{
+            'has-label': $slots.label,
+        }"
+        v-bind="$attrs">
+        <switch-root
+            :id="switchId"
+            v-model="model"
+            :disabled="disabled"
+            class="es-toggle">
+            <switch-thumb class="es-toggle-thumb" />
+        </switch-root>
+        <label
+            v-if="$slots.label"
+            :for="switchId"
+            class="es-toggle-label">
+            <slot name="label" />
+        </label>
+    </div>
 </template>
 
 <style lang="scss">

package/app/components/es-tooltip.vue

@@ -43,60 +43,55 @@ onMounted(() => {
     const mediaQueryResult = window.matchMedia('(hover: none)') as MediaQueryList;
     deviceSupportsTouch.value = mediaQueryResult?.matches || false;
 });
-
-// Workaround: Reka UI components don't play nice with the Nuxt 3.16+ dev server side rendering while using NPM link
-const wrappingComponent = import.meta.dev ? resolveComponent('ClientOnly') : 'span';
 </script>
 
 <template>
-    <component :is="wrappingComponent">
-        <tooltip-provider
-            v-if="!deviceSupportsTouch"
-            :delay-duration="delayDuration"
-            :disable-closing-trigger="true">
-            <tooltip-root
-                :open="show || internalShow"
-                @update:open="handleUpdateOpen">
-                <tooltip-trigger
-                    class="es-tooltip-trigger p-0"
-                    :class="{ [triggerClass]: true }"
-                    @click="handleClick">
-                    <slot name="trigger" />
-                </tooltip-trigger>
-                <tooltip-portal>
-                    <tooltip-content
-                        class="es-tooltip-content"
-                        :class="{
-                            'text-white': variant === 'dark',
-                            'es-tooltip-content--light': variant === 'light',
-                        }"
-                        :collision-padding="collisionPadding"
-                        :side="side">
-                        <tooltip-arrow
-                            class="es-tooltip-arrow"
-                            :class="{ 'es-tooltip-arrow--light': variant === 'light' }"
-                            :height="12"
-                            rounded
-                            :width="22" />
-                        <slot />
-                    </tooltip-content>
-                </tooltip-portal>
-            </tooltip-root>
-        </tooltip-provider>
-        <es-popover
-            v-else
-            :collision-padding="collisionPadding"
-            :show="show"
-            :side="side"
-            :trigger-class="triggerClass"
-            :variant="variant"
-            @update:show="(val: any) => emit('update:show', val)">
-            <template #trigger>
+    <tooltip-provider
+        v-if="!deviceSupportsTouch"
+        :delay-duration="delayDuration"
+        :disable-closing-trigger="true">
+        <tooltip-root
+            :open="show || internalShow"
+            @update:open="handleUpdateOpen">
+            <tooltip-trigger
+                class="es-tooltip-trigger p-0"
+                :class="{ [triggerClass]: true }"
+                @click="handleClick">
                 <slot name="trigger" />
-            </template>
-            <slot />
-        </es-popover>
-    </component>
+            </tooltip-trigger>
+            <tooltip-portal>
+                <tooltip-content
+                    class="es-tooltip-content"
+                    :class="{
+                        'text-white': variant === 'dark',
+                        'es-tooltip-content--light': variant === 'light',
+                    }"
+                    :collision-padding="collisionPadding"
+                    :side="side">
+                    <tooltip-arrow
+                        class="es-tooltip-arrow"
+                        :class="{ 'es-tooltip-arrow--light': variant === 'light' }"
+                        :height="12"
+                        rounded
+                        :width="22" />
+                    <slot />
+                </tooltip-content>
+            </tooltip-portal>
+        </tooltip-root>
+    </tooltip-provider>
+    <es-popover
+        v-else
+        :collision-padding="collisionPadding"
+        :show="show"
+        :side="side"
+        :trigger-class="triggerClass"
+        :variant="variant"
+        @update:show="(val: any) => emit('update:show', val)">
+        <template #trigger>
+            <slot name="trigger" />
+        </template>
+        <slot />
+    </es-popover>
 </template>
 
 <style lang="scss" scoped>

package/nuxt.config.ts

@@ -2,6 +2,11 @@
 export default defineNuxtConfig({
     compatibilityDate: '2024-04-03',
 
+    // prevents "Cannot read properties of null (reading 'ce')" in SSR/SSG with reka-ui
+    build: {
+        transpile: ['reka-ui'],
+    },
+
     // https://nuxt.com/docs/getting-started/styling#the-css-property
     css: ['@energysage/es-ds-styles/scss/bootstrap.scss'],
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@energysage/es-ds-components",
-    "version": "4.1.0",
+    "version": "4.1.1",
     "private": false,
     "type": "module",
     "description": "An EnergySage Vue component library",
@@ -17,21 +17,21 @@
     "author": "EnergySage",
     "license": "MIT",
     "dependencies": {
-        "@energysage/es-ds-styles": "^3.3.1",
-        "@nuxt/eslint": "^1.0.1",
+        "@energysage/es-ds-styles": "^3.3.2",
         "@nuxtjs/google-fonts": "^3.2.0",
         "@vuelidate/core": "^2.0.3",
         "@vuelidate/validators": "^2.0.4",
         "@vueuse/core": "^13.9.0",
         "html-truncate": "^1.2.2",
-        "nuxt": "^4.1.2",
+        "nuxt": "^4.3.1",
         "nuxt-primevue": "^3.0.0",
         "primevue": "^3.53.0",
         "prismjs": "^1.29.0",
-        "reka-ui": "^2.2.0",
-        "vue": "^3.5.6"
+        "reka-ui": "^2.8.0",
+        "vue": "^3.5.28"
     },
     "devDependencies": {
+        "@nuxt/eslint": "^1.14.0",
         "eslint": "^9.20.1",
         "eslint-config-prettier": "^10.0.1",
         "nuxt-primevue": "^3.0.0",