@nascentdigital/funnel-ui 4.6.0 → 4.6.1

package/dist/client/interaction/Carousel.d.ts

@@ -1,6 +1,6 @@
 import { Callback, Duration, Transform } from '@nascentdigital/funnel-core';
 import { HTMLAttributes, ReactElement, ReactNode } from 'react';
-export declare function Carousel({ className, spacing, infinite, autoplay, autoplayInterval: autoplayIntervalRaw, disableClipping, renderIndicator, renderNavButton, renderPlayButton, onPageDrag, onPageChange, children }: Carousel.Props): import("react/jsx-runtime").JSX.Element;
+export declare function Carousel({ className, spacing: spacingRaw, infinite, autoplay, autoplayInterval: autoplayIntervalRaw, disableClipping, renderIndicator, renderNavButton, renderPlayButton, onPageDrag, onPageChange, children }: Carousel.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace Carousel {
     export type State = 'initializing' | 'disabled' | 'ready' | 'dragging' | 'animating';
     export type Props = {

package/dist/client/interaction/Carousel.js

@@ -14,7 +14,7 @@ const rxjs_1 = require("rxjs");
 const app_1 = require("../app");
 const hooks_1 = require("../hooks");
 // component
-function Carousel({ className, spacing = 0, infinite = false, autoplay = false, autoplayInterval: autoplayIntervalRaw, disableClipping = false, renderIndicator, renderNavButton, renderPlayButton, onPageDrag = funnel_core_1.Fn.NoOp, onPageChange = funnel_core_1.Fn.NoOp, children = [] }) {
+function Carousel({ className, spacing: spacingRaw, infinite = false, autoplay = false, autoplayInterval: autoplayIntervalRaw, disableClipping = false, renderIndicator, renderNavButton, renderPlayButton, onPageDrag = funnel_core_1.Fn.NoOp, onPageChange = funnel_core_1.Fn.NoOp, children = [] }) {
     var _a;
     // bind props + state + hooks
     const [state, setState] = (0, react_2.useState)('initializing');
@@ -37,18 +37,21 @@ function Carousel({ className, spacing = 0, infinite = false, autoplay = false,
     const playButtonFocused = !!playButton && keyboardFocusElement === playButton;
     const childCount = children.length;
     const gap = (0, react_2.useMemo)(() => {
+        // zero if no container
         if (!container) {
-            return;
+            return 0;
         }
+        // get gap pixel value from css variable
         const rawValue = getComputedStyle(container).getPropertyValue('--nd-carousel-gap');
         if (rawValue.endsWith('px')) {
             return Number.parseInt(rawValue.substring(0, rawValue.length - 2));
         }
+        // otherwise zero
         else {
-            return undefined;
+            return 0;
         }
     }, [container]);
-    console.debug('>>> carousel', gap);
+    const spacing = spacingRaw !== null && spacingRaw !== void 0 ? spacingRaw : (gap / 2);
     const appConfig = (0, app_1.useAppConfig)();
     const autoplayInterval = (0, react_2.useMemo)(() => { var _a; return funnel_core_1.Duration.toMilliseconds((_a = autoplayIntervalRaw !== null && autoplayIntervalRaw !== void 0 ? autoplayIntervalRaw : appConfig.ui.carouselInterval) !== null && _a !== void 0 ? _a : '1s'); }, [autoplayIntervalRaw, appConfig]);
     const reduceMotion = (0, react_1.useReducedMotion)();

package/dist/styles/fields/Visual.css

@@ -25,4 +25,9 @@
             object-position: var(--nd-visual-anchor);
         }
     }
+
+    img.nd-Visual-image {
+        object-fit: var(--nd-visual-object-fit, cover);
+        object-position: var(--nd-visual-anchor);
+    }
 }

package/dist/styles/panels/VisualPanel.css

@@ -10,6 +10,7 @@
     /* aspect ratios */
     .nd-VisualPanel-aspect-auto {
         --nd-visual-aspect: theme(aspectRatio.auto);
+        --nd-visual-height: auto;
     }
     .nd-VisualPanel-aspect-square {
         --nd-visual-aspect: theme(aspectRatio.square);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nascentdigital/funnel-ui",
   "description": "UI components for funnel",
-  "version": "4.6.0",
+  "version": "4.6.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "restricted"
@@ -69,5 +69,5 @@
     "react-dom": "^19",
     "ts-jest": "^29.3.2"
   },
-  "gitHead": "7fba18243bc79f94b3bd665db21f37bc7f3afd4c"
+  "gitHead": "4a1d18f6f87148196b5e820c0ada8f2a8111b9f6"
 }