@nova-design-system/nova-react 3.0.0-beta.41 → 3.0.0-beta.43

package/dist/cjs/timeline.animation-1b88f052-B8-vCVrY.js

@@ -0,0 +1,105 @@
+'use strict';
+
+var fade_animation2a077983 = require('./fade.animation-2a077983-aKN0EDTo.js');
+
+const useCollapse = (node, { duration } = { duration: 200 }) => {
+    const nodeStyler = fade_animation2a077983.index(node);
+    /**
+     * Will set the overflow to hidden, and animate the max height to 0. Make sure
+     * the element has no border or y padding set, otherwise the animation will
+     * not work as expected.
+     */
+    function collapse() {
+        return new Promise(resolve => {
+            const height = node.getBoundingClientRect().height;
+            nodeStyler.set({ overflow: 'hidden' });
+            fade_animation2a077983.animate({
+                from: height,
+                to: 0,
+                duration,
+                onUpdate: value => {
+                    nodeStyler.set({
+                        maxHeight: value,
+                    });
+                },
+                onComplete: () => {
+                    resolve();
+                },
+            });
+        });
+    }
+    /**
+     * Apply the collapsed styles without animating, useful when initial state
+     * is collapsed.
+     */
+    function setCollapsed() {
+        node.style.maxHeight = '0';
+        node.style.overflow = 'hidden';
+    }
+    /**
+     * Apply the expanded styles without animating, useful when initial state
+     * is expanded.
+     */
+    function setExpanded() {
+        node.style.maxHeight = '';
+        node.style.overflow = '';
+    }
+    /**
+     * Will set the overflow to hidden, and animate the max height to the value
+     * of the scrollHeight. Make sure the element has no border or y padding set,
+     * otherwise the animation will not work as expected. Once complete, the
+     * max-height and overflow style properties will be removed.
+     */
+    function expand() {
+        return new Promise(resolve => {
+            const scrollHeight = node.scrollHeight;
+            nodeStyler.set({
+                overflow: 'hidden',
+            });
+            fade_animation2a077983.animate({
+                from: 0,
+                to: scrollHeight,
+                duration,
+                onUpdate: value => {
+                    nodeStyler.set({
+                        maxHeight: value,
+                    });
+                },
+                onComplete: () => {
+                    node.style.removeProperty('max-height');
+                    node.style.removeProperty('overflow');
+                    resolve();
+                },
+            });
+        });
+    }
+    return {
+        collapse,
+        expand,
+        setCollapsed,
+        setExpanded,
+    };
+};
+
+/**
+ * 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;
+exports.useCollapse = useCollapse;

package/dist/cjs/v4-a79185f4-2n0dOd_Y.js

@@ -0,0 +1,56 @@
+'use strict';
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+var byteToHex = [];
+for (var i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).slice(1));
+}
+function unsafeStringify(arr, offset = 0) {
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  //
+  // Note to future-self: No, you can't remove the `toLowerCase()` call.
+  // REF: https://github.com/uuidjs/uuid/pull/677#issuecomment-1757351351
+  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+}
+
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+
+var getRandomValues;
+var rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+  return getRandomValues(rnds8);
+}
+
+var randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+const native = {
+  randomUUID
+};
+
+function v4(options, buf, offset) {
+  if (native.randomUUID && true && !options) {
+    return native.randomUUID();
+  }
+  options = options || {};
+  var rnds = options.random || (options.rng || rng)();
+
+  // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80;
+  return unsafeStringify(rnds);
+}
+
+exports.v4 = v4;

package/dist/generated/components.js

@@ -14,6 +14,8 @@ import { NvDialog as NvDialogElement, defineCustomElement as defineNvDialog } fr
 import { NvDialogfooter as NvDialogfooterElement, defineCustomElement as defineNvDialogfooter } from "@nova-design-system/nova-webcomponents/dist/components/nv-dialogfooter.js";
 import { NvDialogheader as NvDialogheaderElement, defineCustomElement as defineNvDialogheader } from "@nova-design-system/nova-webcomponents/dist/components/nv-dialogheader.js";
 import { NvFieldcheckbox as NvFieldcheckboxElement, defineCustomElement as defineNvFieldcheckbox } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldcheckbox.js";
+import { NvFielddate as NvFielddateElement, defineCustomElement as defineNvFielddate } from "@nova-design-system/nova-webcomponents/dist/components/nv-fielddate.js";
+import { NvFielddaterange as NvFielddaterangeElement, defineCustomElement as defineNvFielddaterange } from "@nova-design-system/nova-webcomponents/dist/components/nv-fielddaterange.js";
 import { NvFielddropdown as NvFielddropdownElement, defineCustomElement as defineNvFielddropdown } from "@nova-design-system/nova-webcomponents/dist/components/nv-fielddropdown.js";
 import { NvFielddropdownitem as NvFielddropdownitemElement, defineCustomElement as defineNvFielddropdownitem } from "@nova-design-system/nova-webcomponents/dist/components/nv-fielddropdownitem.js";
 import { NvFielddropdownitemcheck as NvFielddropdownitemcheckElement, defineCustomElement as defineNvFielddropdownitemcheck } from "@nova-design-system/nova-webcomponents/dist/components/nv-fielddropdownitemcheck.js";
@@ -158,6 +160,20 @@ export const NvFieldcheckbox = createComponent({
     events: { onCheckedChanged: 'checkedChanged' },
     defineCustomElement: defineNvFieldcheckbox
 });
+export const NvFielddate = createComponent({
+    tagName: 'nv-fielddate',
+    elementClass: NvFielddateElement,
+    react: React,
+    events: { onDateChange: 'dateChange' },
+    defineCustomElement: defineNvFielddate
+});
+export const NvFielddaterange = createComponent({
+    tagName: 'nv-fielddaterange',
+    elementClass: NvFielddaterangeElement,
+    react: React,
+    events: { onDateRangeChange: 'dateRangeChange' },
+    defineCustomElement: defineNvFielddaterange
+});
 export const NvFielddropdown = createComponent({
     tagName: 'nv-fielddropdown',
     elementClass: NvFielddropdownElement,

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

@@ -1,4 +1,4 @@
-import { type ActionEvent, type DateRange, type MenuitemSelectedEventDetail, type NvAlertCustomEvent, type NvBadgeCustomEvent, type NvCalendarCustomEvent, type NvDatagridCustomEvent, type NvFielddropdownCustomEvent, type NvMenuCustomEvent, type NvMenuitemCustomEvent, type NvTableCustomEvent } from "@nova-design-system/nova-webcomponents";
+import { type ActionEvent, type DateRange, type NvAlertCustomEvent, type NvBadgeCustomEvent, type NvCalendarCustomEvent, type NvDatagridCustomEvent, type NvFielddaterangeCustomEvent, type NvFielddropdownCustomEvent, type NvMenuCustomEvent, type NvMenuitemCustomEvent, type NvTableCustomEvent } from "@nova-design-system/nova-webcomponents";
 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";
@@ -14,6 +14,8 @@ import { NvDialog as NvDialogElement } from "@nova-design-system/nova-webcompone
 import { NvDialogfooter as NvDialogfooterElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-dialogfooter.js";
 import { NvDialogheader as NvDialogheaderElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-dialogheader.js";
 import { NvFieldcheckbox as NvFieldcheckboxElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldcheckbox.js";
+import { NvFielddate as NvFielddateElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fielddate.js";
+import { NvFielddaterange as NvFielddaterangeElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fielddaterange.js";
 import { NvFielddropdown as NvFielddropdownElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fielddropdown.js";
 import { NvFielddropdownitem as NvFielddropdownitemElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fielddropdownitem.js";
 import { NvFielddropdownitemcheck as NvFielddropdownitemcheckElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fielddropdownitemcheck.js";
@@ -88,6 +90,16 @@ type NvFieldcheckboxEvents = {
     onCheckedChanged: EventName<CustomEvent<boolean>>;
 };
 export declare const NvFieldcheckbox: StencilReactComponent<NvFieldcheckboxElement, NvFieldcheckboxEvents>;
+type NvFielddateEvents = {
+    onDateChange: EventName<CustomEvent<{
+        value: string;
+    }>>;
+};
+export declare const NvFielddate: StencilReactComponent<NvFielddateElement, NvFielddateEvents>;
+type NvFielddaterangeEvents = {
+    onDateRangeChange: EventName<NvFielddaterangeCustomEvent<DateRange>>;
+};
+export declare const NvFielddaterange: StencilReactComponent<NvFielddaterangeElement, NvFielddaterangeEvents>;
 type NvFielddropdownEvents = {
     onValueChanged: EventName<CustomEvent<string>>;
     onDropdownItemSelected: EventName<NvFielddropdownCustomEvent<HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected']>>;
@@ -150,11 +162,15 @@ export declare const NvIconbutton: StencilReactComponent<NvIconbuttonElement, Nv
 type NvLoaderEvents = NonNullable<unknown>;
 export declare const NvLoader: StencilReactComponent<NvLoaderElement, NvLoaderEvents>;
 type NvMenuEvents = {
-    onMenuitemSelected: EventName<NvMenuCustomEvent<MenuitemSelectedEventDetail>>;
+    onMenuitemSelected: EventName<NvMenuCustomEvent<HTMLNvMenuitemElementEventMap['menuitemSelected']>>;
 };
 export declare const NvMenu: StencilReactComponent<NvMenuElement, NvMenuEvents>;
 type NvMenuitemEvents = {
-    onMenuitemSelected: EventName<NvMenuitemCustomEvent<MenuitemSelectedEventDetail>>;
+    onMenuitemSelected: EventName<NvMenuitemCustomEvent<{
+        id?: HTMLElement['id'];
+        name?: string;
+        hasSubmenu?: boolean;
+    }>>;
 };
 export declare const NvMenuitem: StencilReactComponent<NvMenuitemElement, NvMenuitemEvents>;
 type NvPopoverEvents = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-react",
-  "version": "3.0.0-beta.41",
+  "version": "3.0.0-beta.43",
   "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",