@nova-design-system/nova-react 3.20.0 → 3.21.1-beta.0

package/dist/cjs/generated/components.server.js

@@ -101,7 +101,8 @@ const NvButton = ssr.createComponent({
         disabled: 'disabled',
         fluid: 'fluid',
         type: 'type',
-        form: 'form'
+        form: 'form',
+        disableTabindex: 'disable-tabindex'
     },
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot
@@ -615,7 +616,8 @@ const NvIconbutton = ssr.createComponent({
         active: 'active',
         name: 'name',
         type: 'type',
-        shape: 'shape'
+        shape: 'shape',
+        disableTabindex: 'disable-tabindex'
     },
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot
@@ -669,6 +671,18 @@ const NvNotification = ssr.createComponent({
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot
 });
+const NvNotificationBullet = ssr.createComponent({
+    tagName: 'nv-notification-bullet',
+    properties: {
+        count: 'count',
+        intention: 'intention',
+        emphasis: 'emphasis',
+        size: 'size',
+        contrastingBorder: 'contrasting-border'
+    },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
 const NvNotificationcontainer = ssr.createComponent({
     tagName: 'nv-notificationcontainer',
     properties: { position: 'position' },
@@ -699,6 +713,76 @@ const NvRow = ssr.createComponent({
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot
 });
+const NvSidebar = ssr.createComponent({
+    tagName: 'nv-sidebar',
+    properties: {
+        type: 'type',
+        open: 'open',
+        activePath: 'active-path',
+        notificationIntention: 'notification-intention',
+        notificationEmphasis: 'notification-emphasis'
+    },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
+const NvSidebarcontent = ssr.createComponent({
+    tagName: 'nv-sidebarcontent',
+    properties: {},
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
+const NvSidebardivider = ssr.createComponent({
+    tagName: 'nv-sidebardivider',
+    properties: {},
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
+const NvSidebarfooter = ssr.createComponent({
+    tagName: 'nv-sidebarfooter',
+    properties: {},
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
+const NvSidebargroup = ssr.createComponent({
+    tagName: 'nv-sidebargroup',
+    properties: { label: 'label' },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
+const NvSidebarheader = ssr.createComponent({
+    tagName: 'nv-sidebarheader',
+    properties: {},
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
+const NvSidebarlogo = ssr.createComponent({
+    tagName: 'nv-sidebarlogo',
+    properties: {
+        label: 'label',
+        logo: 'logo',
+        collapsedLogo: 'collapsed-logo'
+    },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
+const NvSidebarnavitem = ssr.createComponent({
+    tagName: 'nv-sidebarnavitem',
+    properties: {
+        icon: 'icon',
+        active: 'active',
+        collapsible: 'collapsible',
+        open: 'open',
+        notificationCount: 'notification-count'
+    },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
+const NvSidebarnavsubitem = ssr.createComponent({
+    tagName: 'nv-sidebarnavsubitem',
+    properties: { active: 'active' },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
 const NvSplit = ssr.createComponent({
     tagName: 'nv-split',
     properties: {
@@ -726,6 +810,15 @@ const NvTable = ssr.createComponent({
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot
 });
+const NvTableheader = ssr.createComponent({
+    tagName: 'nv-tableheader',
+    properties: {
+        sortable: 'sortable',
+        sortDirection: 'sort-direction'
+    },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
 const NvToggle = ssr.createComponent({
     tagName: 'nv-toggle',
     properties: {
@@ -815,12 +908,23 @@ exports.NvLoader = NvLoader;
 exports.NvMenu = NvMenu;
 exports.NvMenuitem = NvMenuitem;
 exports.NvNotification = NvNotification;
+exports.NvNotificationBullet = NvNotificationBullet;
 exports.NvNotificationcontainer = NvNotificationcontainer;
 exports.NvPopover = NvPopover;
 exports.NvRow = NvRow;
+exports.NvSidebar = NvSidebar;
+exports.NvSidebarcontent = NvSidebarcontent;
+exports.NvSidebardivider = NvSidebardivider;
+exports.NvSidebarfooter = NvSidebarfooter;
+exports.NvSidebargroup = NvSidebargroup;
+exports.NvSidebarheader = NvSidebarheader;
+exports.NvSidebarlogo = NvSidebarlogo;
+exports.NvSidebarnavitem = NvSidebarnavitem;
+exports.NvSidebarnavsubitem = NvSidebarnavsubitem;
 exports.NvSplit = NvSplit;
 exports.NvStack = NvStack;
 exports.NvTable = NvTable;
+exports.NvTableheader = NvTableheader;
 exports.NvToggle = NvToggle;
 exports.NvTogglebutton = NvTogglebutton;
 exports.NvTogglebuttongroup = NvTogglebuttongroup;

package/dist/cjs/grow.animation-24ad5cf8-LUp_ITEx.js

@@ -0,0 +1,111 @@
+'use strict';
+
+var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');
+var styleValueTypes_esF5d10b79 = require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
+
+/**
+ * Adds a set of event listeners to the given target.
+ * @param {EventsAndListeners} events - The events and listeners to add.
+ * @param {Element | Window | Document} target  - The target element or window to add the event listeners to.
+ * @param {T} context - The class context to bind the event listeners to.
+ */
+function addEventListeners(events, target, context) {
+    events.forEach(([event, listener]) => target.addEventListener(event, listener.bind(context)));
+}
+/**
+ * Removes a set of event listeners from the given target.
+ * @param {EventsAndListeners} events - The events and listeners to remove.
+ * @param {Element | Window | Document} target  - The target element or window to remove the event listeners from.
+ * @param {T} context - The class context to bind the event listeners to.
+ */
+function removeEventListeners(events, target, context) {
+    events.forEach(([event, listener]) => target.removeEventListener(event, listener.bind(context)));
+}
+
+const useGrow = (node, { duration = 200, amount = 0.8, hasFade = true } = {}) => {
+    const nodeStyler = fade_animation9b939939.index(node);
+    /**
+     * Will animate the scale and optionally the opacity to make the element grow and fade in,
+     * and removes the scale and opacity style attributes once complete.
+     */
+    function growIn() {
+        return new Promise(resolve => {
+            styleValueTypes_esF5d10b79.animate({
+                from: { opacity: hasFade ? 0 : 1, scale: amount },
+                to: { opacity: 1, scale: 1 },
+                duration,
+                onUpdate(latest) {
+                    const updates = {
+                        scale: latest.scale,
+                    };
+                    if (hasFade) {
+                        updates['opacity'] = latest.opacity;
+                    }
+                    nodeStyler.set(updates);
+                },
+                onComplete() {
+                    resolve();
+                    if (hasFade) {
+                        node.style.removeProperty('opacity');
+                    }
+                    node.style.removeProperty('transform');
+                },
+            });
+        });
+    }
+    /**
+     * Applies the growOut styles without animating, useful when the initial
+     * state is hidden.
+     */
+    function setGrowOut() {
+        node.style.transform = `scale(${amount})`;
+        if (hasFade) {
+            node.style.opacity = '0';
+        }
+    }
+    /**
+     * Applies the growIn styles without animating, useful when the initial
+     * state is visible.
+     */
+    function setGrowIn() {
+        node.style.transform = `scale(1)`;
+        if (hasFade) {
+            node.style.opacity = '1';
+        }
+    }
+    /**
+     * Will animate the scale and optionally the opacity to make the element shrink and fade out,
+     * leaving the scale and opacity styles on the element.
+     */
+    function growOut() {
+        return new Promise(resolve => {
+            styleValueTypes_esF5d10b79.animate({
+                from: { opacity: 1, scale: 1 },
+                to: { opacity: hasFade ? 0 : 1, scale: amount },
+                duration,
+                onUpdate(latest) {
+                    const updates = {
+                        scale: latest.scale,
+                    };
+                    if (hasFade) {
+                        updates['opacity'] = latest.opacity;
+                    }
+                    nodeStyler.set(updates);
+                },
+                onComplete() {
+                    resolve();
+                },
+            });
+        });
+    }
+    return {
+        growIn,
+        growOut,
+        setGrowOut,
+        setGrowIn,
+    };
+};
+
+exports.addEventListeners = addEventListeners;
+exports.removeEventListeners = removeEventListeners;
+exports.useGrow = useGrow;