@nova-design-system/nova-react 3.5.0 → 3.6.0

package/dist/cjs/{fade.animation-2a077983-aKN0EDTo.js → stylefire.es-74da334a-y0piPjlz.js}

@@ -1764,69 +1764,5 @@ function index(nodeOrSelector, props) {
     return getStyler(node, props);
 }
 
-const useFade = (node, { duration } = { duration: 200 }) => {
-    const nodeStyler = index(node);
-    /**
-     * Will animate the opacity to 1, and removes the opacity style attribute once
-     * complete.
-     */
-    function fadeIn() {
-        return new Promise(resolve => {
-            animate({
-                from: { opacity: 0 },
-                to: { opacity: 1 },
-                duration,
-                onUpdate(latest) {
-                    nodeStyler.set({ opacity: latest.opacity });
-                },
-                onComplete() {
-                    resolve();
-                    node.style.removeProperty('opacity');
-                },
-            });
-        });
-    }
-    /**
-     * Applies the fadeOut styles without animating, useful when initial state
-     * is hidden.
-     */
-    function setFadeOut() {
-        node.style.opacity = '0';
-    }
-    /**
-     * Applies the fadeIn styles without animating, useful when initial state
-     * is visible.
-     */
-    function setFadeIn() {
-        node.style.opacity = '1';
-    }
-    /**
-     * Will animate the opacity to 0, once complete, the opacity style attribute
-     * will stay on the element.
-     */
-    function fadeOut() {
-        return new Promise(resolve => {
-            animate({
-                from: { opacity: 1 },
-                to: { opacity: 0 },
-                duration,
-                onUpdate(latest) {
-                    nodeStyler.set({ opacity: latest.opacity });
-                },
-                onComplete() {
-                    resolve();
-                },
-            });
-        });
-    }
-    return {
-        fadeIn,
-        fadeOut,
-        setFadeOut,
-        setFadeIn,
-    };
-};
-
 exports.animate = animate;
 exports.index = index;
-exports.useFade = useFade;

package/dist/cjs/timeline.animation-adf35ecb-CE6Dsdxr.js

@@ -0,0 +1,23 @@
+'use strict';
+
+/**
+ * Will execute a series of animation promises in sequence.
+ * This is useful for chaining animations where each step depends on the
+ * previous one completing before starting the next.
+ *
+ * @param {Array<() => Promise<void>>} animations - The array of animation functions.
+ * @returns {Object} - An object with a `start` method to begin the timeline.
+ *
+ * @example
+ * const { fadeOut } = useFade(this.ref);
+ * const { collapse } = useCollapse(this.ref);
+ *
+ * timeline(fadeOut, collapse).start();
+ */
+const timeline = (...animations) => ({
+    start: () => {
+        return animations.reduce((promise, animation) => promise.then(() => animation()), Promise.resolve());
+    },
+});
+
+exports.timeline = timeline;

package/dist/generated/components.js

@@ -1,4 +1,6 @@
 'use client';
+import { NvAccordionItem as NvAccordionItemElement, defineCustomElement as defineNvAccordionItem } from "@nova-design-system/nova-webcomponents/dist/components/nv-accordion-item.js";
+import { NvAccordion as NvAccordionElement, defineCustomElement as defineNvAccordion } from "@nova-design-system/nova-webcomponents/dist/components/nv-accordion.js";
 import { NvAlert as NvAlertElement, defineCustomElement as defineNvAlert } from "@nova-design-system/nova-webcomponents/dist/components/nv-alert.js";
 import { NvAvatar as NvAvatarElement, defineCustomElement as defineNvAvatar } from "@nova-design-system/nova-webcomponents/dist/components/nv-avatar.js";
 import { NvBadge as NvBadgeElement, defineCustomElement as defineNvBadge } from "@nova-design-system/nova-webcomponents/dist/components/nv-badge.js";
@@ -41,6 +43,20 @@ import { NvToggle as NvToggleElement, defineCustomElement as defineNvToggle } fr
 import { NvTooltip as NvTooltipElement, defineCustomElement as defineNvTooltip } from "@nova-design-system/nova-webcomponents/dist/components/nv-tooltip.js";
 import { createComponent } from '@stencil/react-output-target/runtime';
 import React from 'react';
+export const NvAccordion = createComponent({
+    tagName: 'nv-accordion',
+    elementClass: NvAccordionElement,
+    react: React,
+    events: { onNvChange: 'nvChange' },
+    defineCustomElement: defineNvAccordion
+});
+export const NvAccordionItem = createComponent({
+    tagName: 'nv-accordion-item',
+    elementClass: NvAccordionItemElement,
+    react: React,
+    events: { onItemToggle: 'itemToggle' },
+    defineCustomElement: defineNvAccordionItem
+});
 export const NvAlert = createComponent({
     tagName: 'nv-alert',
     elementClass: NvAlertElement,
@@ -205,7 +221,7 @@ export const NvFieldmultiselect = createComponent({
     react: React,
     events: {
         onValueChanged: 'valueChanged',
-        onMultiselectChange: 'multiselectChange'
+        onFilterTextChanged: 'filterTextChanged'
     },
     defineCustomElement: defineNvFieldmultiselect
 });
@@ -346,6 +362,6 @@ export const NvTooltip = createComponent({
     tagName: 'nv-tooltip',
     elementClass: NvTooltipElement,
     react: React,
-    events: {},
+    events: { onOpenChanged: 'openChanged' },
     defineCustomElement: defineNvTooltip
 });

package/dist/generated/components.server.js

@@ -1,5 +1,27 @@
 import { createComponent } from '@stencil/react-output-target/ssr';
 export const serializeShadowRoot = { default: "declarative-shadow-dom" };
+export const NvAccordion = createComponent({
+    tagName: 'nv-accordion',
+    properties: {
+        data: 'data',
+        mode: 'mode'
+    },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
+export const NvAccordionItem = createComponent({
+    tagName: 'nv-accordion-item',
+    properties: {
+        itemtitle: 'itemtitle',
+        subtitle: 'subtitle',
+        open: 'open',
+        disabled: 'disabled',
+        maxContentHeight: 'max-content-height',
+        mode: 'mode'
+    },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
 export const NvAlert = createComponent({
     tagName: 'nv-alert',
     properties: {
@@ -144,7 +166,8 @@ export const NvDialog = createComponent({
         undismissable: 'undismissable',
         clickOutside: 'click-outside',
         controlled: 'controlled',
-        full: 'full'
+        full: 'full',
+        autofocus: 'autofocus'
     },
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot
@@ -321,7 +344,6 @@ export const NvFieldmultiselect = createComponent({
         description: 'description',
         placeholder: 'placeholder',
         autocomplete: 'autocomplete',
-        value: 'value',
         required: 'required',
         readonly: 'readonly',
         disabled: 'disabled',
@@ -334,7 +356,8 @@ export const NvFieldmultiselect = createComponent({
         debounceDelay: 'debounce-delay',
         autofocus: 'autofocus',
         fluid: 'fluid',
-        badgeLabel: 'badge-label'
+        badgeLabel: 'badge-label',
+        filterText: 'filter-text'
     },
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot

package/dist/types/generated/components.d.ts

@@ -1,4 +1,6 @@
 import { type NvCalendarCustomEvent, type NvFielddaterangeCustomEvent, type NvFielddropdownCustomEvent, type NvMenuCustomEvent, type NvMenuitemCustomEvent } from "@nova-design-system/nova-webcomponents";
+import { NvAccordionItem as NvAccordionItemElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-accordion-item.js";
+import { NvAccordion as NvAccordionElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-accordion.js";
 import { NvAlert as NvAlertElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-alert.js";
 import { NvAvatar as NvAvatarElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-avatar.js";
 import { NvBadge as NvBadgeElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-badge.js";
@@ -40,6 +42,16 @@ import { NvTablecolumn as NvTablecolumnElement } from "@nova-design-system/nova-
 import { NvToggle as NvToggleElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-toggle.js";
 import { NvTooltip as NvTooltipElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-tooltip.js";
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+export type NvAccordionEvents = {
+    onNvChange: EventName<CustomEvent<{
+        openIndexes: number[];
+    }>>;
+};
+export declare const NvAccordion: StencilReactComponent<NvAccordionElement, NvAccordionEvents>;
+export type NvAccordionItemEvents = {
+    onItemToggle: EventName<CustomEvent<boolean>>;
+};
+export declare const NvAccordionItem: StencilReactComponent<NvAccordionItemElement, NvAccordionItemEvents>;
 export type NvAlertEvents = {
     onHiddenChanged: EventName<CustomEvent<boolean>>;
     onHiddenChangedComplete: EventName<CustomEvent<boolean>>;
@@ -134,8 +146,8 @@ export type NvFielddropdownitemcheckEvents = {
 };
 export declare const NvFielddropdownitemcheck: StencilReactComponent<NvFielddropdownitemcheckElement, NvFielddropdownitemcheckEvents>;
 export type NvFieldmultiselectEvents = {
-    onValueChanged: EventName<CustomEvent<string>>;
-    onMultiselectChange: EventName<CustomEvent<string[]>>;
+    onValueChanged: EventName<CustomEvent<string[]>>;
+    onFilterTextChanged: EventName<CustomEvent<string>>;
 };
 export declare const NvFieldmultiselect: StencilReactComponent<NvFieldmultiselectElement, NvFieldmultiselectEvents>;
 export type NvFieldnumberEvents = {
@@ -209,5 +221,7 @@ export type NvToggleEvents = {
     onCheckedChanged: EventName<CustomEvent<boolean>>;
 };
 export declare const NvToggle: StencilReactComponent<NvToggleElement, NvToggleEvents>;
-export type NvTooltipEvents = NonNullable<unknown>;
+export type NvTooltipEvents = {
+    onOpenChanged: EventName<CustomEvent<boolean>>;
+};
 export declare const NvTooltip: StencilReactComponent<NvTooltipElement, NvTooltipEvents>;

package/dist/types/generated/components.server.d.ts

@@ -1,4 +1,6 @@
 import { type NvCalendarCustomEvent, type NvFielddaterangeCustomEvent, type NvFielddropdownCustomEvent, type NvMenuCustomEvent, type NvMenuitemCustomEvent } from "@nova-design-system/nova-webcomponents";
+import { NvAccordionItem as NvAccordionItemElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-accordion-item.js";
+import { NvAccordion as NvAccordionElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-accordion.js";
 import { NvAlert as NvAlertElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-alert.js";
 import { NvAvatar as NvAvatarElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-avatar.js";
 import { NvBadge as NvBadgeElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-badge.js";
@@ -42,6 +44,16 @@ import { NvTooltip as NvTooltipElement } from "@nova-design-system/nova-webcompo
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
 import { type SerializeShadowRootOptions } from '@stencil/react-output-target/ssr';
 export declare const serializeShadowRoot: SerializeShadowRootOptions;
+export type NvAccordionEvents = {
+    onNvChange: EventName<CustomEvent<{
+        openIndexes: number[];
+    }>>;
+};
+export declare const NvAccordion: StencilReactComponent<NvAccordionElement, NvAccordionEvents>;
+export type NvAccordionItemEvents = {
+    onItemToggle: EventName<CustomEvent<boolean>>;
+};
+export declare const NvAccordionItem: StencilReactComponent<NvAccordionItemElement, NvAccordionItemEvents>;
 export type NvAlertEvents = {
     onHiddenChanged: EventName<CustomEvent<boolean>>;
     onHiddenChangedComplete: EventName<CustomEvent<boolean>>;
@@ -136,8 +148,8 @@ export type NvFielddropdownitemcheckEvents = {
 };
 export declare const NvFielddropdownitemcheck: StencilReactComponent<NvFielddropdownitemcheckElement, NvFielddropdownitemcheckEvents>;
 export type NvFieldmultiselectEvents = {
-    onValueChanged: EventName<CustomEvent<string>>;
-    onMultiselectChange: EventName<CustomEvent<string[]>>;
+    onValueChanged: EventName<CustomEvent<string[]>>;
+    onFilterTextChanged: EventName<CustomEvent<string>>;
 };
 export declare const NvFieldmultiselect: StencilReactComponent<NvFieldmultiselectElement, NvFieldmultiselectEvents>;
 export type NvFieldnumberEvents = {
@@ -211,5 +223,7 @@ export type NvToggleEvents = {
     onCheckedChanged: EventName<CustomEvent<boolean>>;
 };
 export declare const NvToggle: StencilReactComponent<NvToggleElement, NvToggleEvents>;
-export type NvTooltipEvents = NonNullable<unknown>;
+export type NvTooltipEvents = {
+    onOpenChanged: EventName<CustomEvent<boolean>>;
+};
 export declare const NvTooltip: StencilReactComponent<NvTooltipElement, NvTooltipEvents>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-react",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
   "author": "Elia Group",
   "homepage": "https://nova.eliagroup.io",