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

package/dist/cjs/{nv-tooltip.entry-XvxL_FTH.js → nv-tooltip.entry-BNvm30iV.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Te0zRbKN.js');
+var index = require('./index-Cv7U-U85.js');
 require('react');
 
 const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative;user-select:none}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip [data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip [data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
@@ -9,6 +9,7 @@ const NvTooltipStyle0 = nvTooltipCss;
 const NvTooltip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.openChanged = index.createEvent(this, "openChanged");
         /**
          * Decides where the tooltip shows up next to the element it’s linked to
          * (above, below, to the sides). If there isn’t enough room, it will adjust
@@ -22,7 +23,7 @@ const NvTooltip = class {
          */
         this.enterDelay = 0;
     }
-    //#endregion PROPERTIES
+    //#endregion EVENTS
     /****************************************************************************/
     //#region LIFECYCLE
     componentWillLoad() {
@@ -35,7 +36,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'a5ac533aff7f1dbeb92fdea0b512418a05ed39d1' }, index.h("slot", { key: '5c96133df21b7fdc7cf2d9eb73766dc88d4bdc2e' }), index.h("nv-popover", { key: 'e80cb8ebb57f57940e9a32bb00499a5a35e1e547', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: '180dedb4dcf838271ea48986f5c8183fd8772af4', slot: "content" }, this.message), index.h("slot", { key: 'b5a026e8a446e08a1a50fc3838757e4b4264b07a', name: "content" }))));
+        return (index.h(index.Host, { key: 'ced39f0ebd3ee8eba520e6d6241728e95031dafc' }, index.h("slot", { key: '2b65cb626604a29e1924e7eb2bbb4e937c1a9e9c' }), index.h("nv-popover", { key: 'd4c91e52da651c1545b6d7af98c740e08eeaffbf', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: '45805ecf6ffee80f4f81acce2d921ad66585bf2b', slot: "content" }, this.message), index.h("slot", { key: 'e6a7e80c35c3a87627a50b271c86783fab791338', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };

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: { onOpenChanged: 'openChanged' },
+    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,24 @@
 import { createComponent } from '@stencil/react-output-target/ssr';
 export const serializeShadowRoot = { default: "declarative-shadow-dom" };
+export const NvAccordion = createComponent({
+    tagName: 'nv-accordion',
+    properties: { mode: 'mode' },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
+export const NvAccordionItem = createComponent({
+    tagName: 'nv-accordion-item',
+    properties: {
+        itemTitle: 'item-title',
+        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 +163,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 +341,6 @@ export const NvFieldmultiselect = createComponent({
         description: 'description',
         placeholder: 'placeholder',
         autocomplete: 'autocomplete',
-        value: 'value',
         required: 'required',
         readonly: 'readonly',
         disabled: 'disabled',
@@ -334,7 +353,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 = {
+    onOpenChanged: 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 = {
+    onOpenChanged: 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.7.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",