@snack-uikit/carousel 0.6.13 → 0.6.14-preview-4e8bfebd.0

package/dist/cjs/components/Carousel/Carousel.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
@@ -29,29 +31,38 @@ const ItemProvider_1 = require("../ItemProvider");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function Carousel(_a) {
   var _b;
-  var {
-      children: items,
-      showItems = 1,
-      scrollBy: scrollByProp,
-      transition = 0.4,
-      swipe = true,
-      arrows = true,
-      pagination = true,
-      className,
-      gap,
-      state,
-      infiniteScroll = false,
-      swipeActivateLength = 48,
-      autoSwipe,
-      controlsVisibility = 'hover'
-    } = _a,
+  var items = _a.children,
+    _a$showItems = _a.showItems,
+    showItems = _a$showItems === void 0 ? 1 : _a$showItems,
+    scrollByProp = _a.scrollBy,
+    _a$transition = _a.transition,
+    transition = _a$transition === void 0 ? 0.4 : _a$transition,
+    _a$swipe = _a.swipe,
+    swipe = _a$swipe === void 0 ? true : _a$swipe,
+    _a$arrows = _a.arrows,
+    arrows = _a$arrows === void 0 ? true : _a$arrows,
+    _a$pagination = _a.pagination,
+    pagination = _a$pagination === void 0 ? true : _a$pagination,
+    className = _a.className,
+    gap = _a.gap,
+    state = _a.state,
+    _a$infiniteScroll = _a.infiniteScroll,
+    infiniteScroll = _a$infiniteScroll === void 0 ? false : _a$infiniteScroll,
+    _a$swipeActivateLengt = _a.swipeActivateLength,
+    swipeActivateLength = _a$swipeActivateLengt === void 0 ? 48 : _a$swipeActivateLengt,
+    autoSwipe = _a.autoSwipe,
+    _a$controlsVisibility = _a.controlsVisibility,
+    controlsVisibility = _a$controlsVisibility === void 0 ? 'hover' : _a$controlsVisibility,
     rest = __rest(_a, ["children", "showItems", "scrollBy", "transition", "swipe", "arrows", "pagination", "className", "gap", "state", "infiniteScroll", "swipeActivateLength", "autoSwipe", "controlsVisibility"]);
   const timerRef = (0, react_1.useRef)();
   const scrollBy = (0, react_1.useMemo)(() => scrollByProp !== null && scrollByProp !== void 0 ? scrollByProp : Math.trunc(showItems), [showItems, scrollByProp]);
-  const [page, setPage] = (0, uncontrollable_1.useUncontrolledProp)(state === null || state === void 0 ? void 0 : state.page, (_b = state === null || state === void 0 ? void 0 : state.page) !== null && _b !== void 0 ? _b : 0, newPage => {
-    const result = typeof newPage === 'function' ? newPage(page) : newPage;
-    state === null || state === void 0 ? void 0 : state.onChange(result);
-  });
+  const _ref = (0, uncontrollable_1.useUncontrolledProp)(state === null || state === void 0 ? void 0 : state.page, (_b = state === null || state === void 0 ? void 0 : state.page) !== null && _b !== void 0 ? _b : 0, newPage => {
+      const result = typeof newPage === 'function' ? newPage(page) : newPage;
+      state === null || state === void 0 ? void 0 : state.onChange(result);
+    }),
+    _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+    page = _ref2[0],
+    setPage = _ref2[1];
   const total = (0, react_1.useMemo)(() => {
     if (items.length <= showItems) {
       return 1;

package/dist/cjs/components/Control/Control.js

@@ -24,11 +24,9 @@ const icons_1 = require("@snack-uikit/icons");
 const utils_1 = require("@snack-uikit/utils");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 exports.Control = (0, react_1.forwardRef)((_a, ref) => {
-  var {
-      onClick,
-      variant,
-      className
-    } = _a,
+  var onClick = _a.onClick,
+    variant = _a.variant,
+    className = _a.className,
     rest = __rest(_a, ["onClick", "variant", "className"]);
   return (0, jsx_runtime_1.jsx)("button", Object.assign({
     ref: ref,

package/dist/cjs/components/ItemProvider/ItemProvider.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
@@ -18,58 +20,67 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ItemProvider = ItemProvider;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const lodash_debounce_1 = __importDefault(require("lodash.debounce"));
+const lodash_1 = require("lodash");
 const merge_refs_1 = __importDefault(require("merge-refs"));
 const react_1 = require("react");
 const utils_1 = require("@snack-uikit/utils");
 const testIds_1 = require("../../testIds");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function parseCssLength(value) {
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
 function ItemProvider(_ref) {
-  let {
-    items,
-    showItems,
-    scrollBy,
-    slideCallback,
-    transition,
-    swipe,
-    swipeActivateLength,
-    page,
-    gap
-  } = _ref;
+  let items = _ref.items,
+    showItems = _ref.showItems,
+    scrollBy = _ref.scrollBy,
+    slideCallback = _ref.slideCallback,
+    transition = _ref.transition,
+    swipe = _ref.swipe,
+    swipeActivateLength = _ref.swipeActivateLength,
+    page = _ref.page,
+    gap = _ref.gap;
   const containerRef = (0, react_1.useRef)(null);
-  const [computedValues, setComputedValues] = (0, react_1.useState)({
-    itemWidth: 0,
-    gap: 0
-  });
+  const itemsTrackerRef = (0, react_1.useRef)(null);
+  const _ref2 = (0, react_1.useState)({
+      itemWidth: 0,
+      gap: 0
+    }),
+    _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+    computedValues = _ref3[0],
+    setComputedValues = _ref3[1];
   const recalculateItemsSize = (0, react_1.useCallback)(() => {
     const containerElement = containerRef.current;
-    if (!containerElement) {
+    const trackerElement = itemsTrackerRef.current;
+    if (!containerElement || !trackerElement) {
       return;
     }
-    const styles = getComputedStyle(containerElement);
-    const gap = Number.parseFloat(styles.getPropertyValue('--gap'));
-    const paddingLeft = Number.parseFloat(styles.getPropertyValue('padding-left'));
-    const paddingRight = Number.parseFloat(styles.getPropertyValue('padding-right'));
-    const itemWidth = (containerElement.getBoundingClientRect().width - (Math.trunc(showItems) - 1) * gap - paddingLeft - paddingRight) / showItems;
+    const containerStyles = getComputedStyle(containerElement);
+    const trackerStyles = getComputedStyle(trackerElement);
+    const gapValue = gap ? parseCssLength(gap) : parseCssLength(trackerStyles.columnGap || trackerStyles.gap);
+    const paddingLeft = parseCssLength(containerStyles.paddingLeft);
+    const paddingRight = parseCssLength(containerStyles.paddingRight);
+    const gapsCount = Math.max(Math.trunc(showItems) - 1, 0);
+    const contentWidth = containerElement.getBoundingClientRect().width - paddingLeft - paddingRight;
+    const itemWidth = (contentWidth - gapsCount * gapValue) / showItems;
     setComputedValues({
       itemWidth,
-      gap
+      gap: gapValue
     });
-  }, [showItems]);
-  (0, react_1.useEffect)(() => {
+  }, [showItems, gap]);
+  (0, utils_1.useLayoutEffect)(() => {
     const node = containerRef.current;
     if (!node) {
       return;
     }
     recalculateItemsSize();
-    const observer = new ResizeObserver((0, lodash_debounce_1.default)(recalculateItemsSize, 100));
+    const observer = new ResizeObserver((0, lodash_1.debounce)(recalculateItemsSize, 100));
     observer.observe(node);
     return () => observer.disconnect();
   }, [recalculateItemsSize]);
-  const itemsTrackerRef = (0, react_1.useRef)(null);
   const hideNonVisibleItems = () => {
     var _a;
-    (_a = itemsTrackerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`[data-test-id=${testIds_1.TEST_IDS.trackItem}]`).forEach(slide => {
+    (_a = itemsTrackerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-test-id=".concat(testIds_1.TEST_IDS.trackItem, "]")).forEach(slide => {
       slide.setAttribute('aria-hidden', '0');
       slide.querySelectorAll('a, button, select, input, textarea, [tabindex="0"]').forEach(focusableElement => {
         focusableElement.setAttribute('tabindex', '-5');
@@ -79,7 +90,7 @@ function ItemProvider(_ref) {
   };
   const showVisibleItems = (slide, page, show) => {
     var _a;
-    (_a = itemsTrackerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`[data-test-id=${testIds_1.TEST_IDS.trackItem}]`).forEach((item, i) => {
+    (_a = itemsTrackerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-test-id=".concat(testIds_1.TEST_IDS.trackItem, "]")).forEach((item, i) => {
       if (i >= page * slide && i < page * slide + Math.trunc(show)) {
         item.removeAttribute('aria-hidden');
         item.querySelectorAll('a, button, select, input, textarea, [tabindex="-5"]').forEach(focusableElement => {
@@ -113,12 +124,15 @@ function ItemProvider(_ref) {
       return computedValues.itemWidth;
     }
     const fallbackWidth = Math.floor(100 / showItems);
-    return `${fallbackWidth}%`;
+    return "".concat(fallbackWidth, "%");
   }, [computedValues.itemWidth, showItems]);
-  const [drag, setDrag] = (0, react_1.useState)({
-    drag: 0,
-    pointers: true
-  });
+  const _ref4 = (0, react_1.useState)({
+      drag: 0,
+      pointers: true
+    }),
+    _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
+    drag = _ref5[0],
+    setDrag = _ref5[1];
   const handleSwiping = eventData => {
     setDrag({
       drag: eventData.deltaX,
@@ -146,9 +160,7 @@ function ItemProvider(_ref) {
       enabled: swipe,
       availableDirections: ['Left', 'Right']
     }),
-    {
-      ref
-    } = _a,
+    ref = _a.ref,
     swipeProps = __rest(_a, ["ref"]);
   return (0, jsx_runtime_1.jsx)("div", {
     ref: containerRef,
@@ -163,8 +175,8 @@ function ItemProvider(_ref) {
       className: styles_module_scss_1.default.itemTracker,
       "data-test-id": testIds_1.TEST_IDS.trackLine,
       style: {
-        transform: `translateX(${transform + drag.drag}px)`,
-        transition: `transform ${transition}s ease 0s`
+        transform: "translateX(".concat(transform + drag.drag, "px)"),
+        transition: "transform ".concat(transition, "s ease 0s")
       },
       ref: (0, merge_refs_1.default)(ref, itemsTrackerRef),
       children: items.map((item, i) =>

package/dist/cjs/components/ItemProvider/styles.module.css

@@ -1,12 +1,9 @@
 .itemProvider{
   --gap:var(--dimension-2m, 16px);
-  padding-top:var(--space-carousel-content-layout-padding, 4px);
-  padding-bottom:var(--space-carousel-content-layout-padding, 4px);
-  padding-left:var(--space-carousel-content-layout-padding, 4px);
-  padding-right:var(--space-carousel-content-layout-padding, 4px);
   overflow-x:hidden;
   width:100%;
-  margin:calc(0px - var(--space-carousel-content-layout-padding, 4px));
+  margin-block:calc(0px - var(--space-carousel-content-layout-padding, 4px));
+  padding-block:var(--space-carousel-content-layout-padding, 4px);
 }
 .itemProvider[data-swipe]{
   cursor:grab;
@@ -22,6 +19,7 @@
 .itemContainer{
   flex-shrink:0;
   box-sizing:border-box;
+  padding:var(--border-width-card-container, 1px);
 }
 
 .itemTracker{

package/dist/esm/components/ItemProvider/ItemProvider.js

@@ -10,35 +10,40 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import debounce from 'lodash.debounce';
+import { debounce } from 'lodash';
 import mergeRefs from 'merge-refs';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useSwipeable } from '@snack-uikit/utils';
+import { useLayoutEffect, useSwipeable } from '@snack-uikit/utils';
 import { TEST_IDS } from '../../testIds';
 import styles from './styles.module.css';
+function parseCssLength(value) {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+}
 export function ItemProvider({ items, showItems, scrollBy, slideCallback, transition, swipe, swipeActivateLength, page, gap, }) {
     const containerRef = useRef(null);
+    const itemsTrackerRef = useRef(null);
     const [computedValues, setComputedValues] = useState({
         itemWidth: 0,
         gap: 0,
     });
     const recalculateItemsSize = useCallback(() => {
         const containerElement = containerRef.current;
-        if (!containerElement) {
+        const trackerElement = itemsTrackerRef.current;
+        if (!containerElement || !trackerElement) {
             return;
         }
-        const styles = getComputedStyle(containerElement);
-        const gap = Number.parseFloat(styles.getPropertyValue('--gap'));
-        const paddingLeft = Number.parseFloat(styles.getPropertyValue('padding-left'));
-        const paddingRight = Number.parseFloat(styles.getPropertyValue('padding-right'));
-        const itemWidth = (containerElement.getBoundingClientRect().width -
-            (Math.trunc(showItems) - 1) * gap -
-            paddingLeft -
-            paddingRight) /
-            showItems;
-        setComputedValues({ itemWidth, gap });
-    }, [showItems]);
-    useEffect(() => {
+        const containerStyles = getComputedStyle(containerElement);
+        const trackerStyles = getComputedStyle(trackerElement);
+        const gapValue = gap ? parseCssLength(gap) : parseCssLength(trackerStyles.columnGap || trackerStyles.gap);
+        const paddingLeft = parseCssLength(containerStyles.paddingLeft);
+        const paddingRight = parseCssLength(containerStyles.paddingRight);
+        const gapsCount = Math.max(Math.trunc(showItems) - 1, 0);
+        const contentWidth = containerElement.getBoundingClientRect().width - paddingLeft - paddingRight;
+        const itemWidth = (contentWidth - gapsCount * gapValue) / showItems;
+        setComputedValues({ itemWidth, gap: gapValue });
+    }, [showItems, gap]);
+    useLayoutEffect(() => {
         const node = containerRef.current;
         if (!node) {
             return;
@@ -48,7 +53,6 @@ export function ItemProvider({ items, showItems, scrollBy, slideCallback, transi
         observer.observe(node);
         return () => observer.disconnect();
     }, [recalculateItemsSize]);
-    const itemsTrackerRef = useRef(null);
     const hideNonVisibleItems = () => {
         var _a;
         (_a = itemsTrackerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`[data-test-id=${TEST_IDS.trackItem}]`).forEach(slide => {

package/dist/esm/components/ItemProvider/styles.module.css

@@ -1,12 +1,9 @@
 .itemProvider{
   --gap:var(--dimension-2m, 16px);
-  padding-top:var(--space-carousel-content-layout-padding, 4px);
-  padding-bottom:var(--space-carousel-content-layout-padding, 4px);
-  padding-left:var(--space-carousel-content-layout-padding, 4px);
-  padding-right:var(--space-carousel-content-layout-padding, 4px);
   overflow-x:hidden;
   width:100%;
-  margin:calc(0px - var(--space-carousel-content-layout-padding, 4px));
+  margin-block:calc(0px - var(--space-carousel-content-layout-padding, 4px));
+  padding-block:var(--space-carousel-content-layout-padding, 4px);
 }
 .itemProvider[data-swipe]{
   cursor:grab;
@@ -22,6 +19,7 @@
 .itemContainer{
   flex-shrink:0;
   box-sizing:border-box;
+  padding:var(--border-width-card-container, 1px);
 }
 
 .itemTracker{

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.6.13",
+  "version": "0.6.14-preview-4e8bfebd.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,13 +36,13 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.27.7",
-    "@snack-uikit/pagination": "0.10.26",
+    "@snack-uikit/icons": "0.27.8-preview-4e8bfebd.0",
+    "@snack-uikit/pagination": "0.10.27-preview-4e8bfebd.0",
     "@snack-uikit/utils": "4.0.2",
     "classnames": "2.5.1",
-    "lodash.debounce": "4.0.8",
+    "lodash": "4.18.1",
     "merge-refs": "1.3.0",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "dfbff14ac89d87d7a86abd70d307e92bf11906cb"
+  "gitHead": "d52534cac02c3b621615686607bfba56762150ac"
 }

package/src/components/ItemProvider/ItemProvider.tsx

@@ -1,8 +1,8 @@
-import debounce from 'lodash.debounce';
+import { debounce } from 'lodash';
 import mergeRefs from 'merge-refs';
 import { MouseEventHandler, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { SwipeCallback, useSwipeable } from '@snack-uikit/utils';
+import { SwipeCallback, useLayoutEffect, useSwipeable } from '@snack-uikit/utils';
 
 import { TEST_IDS } from '../../testIds';
 import styles from './styles.module.scss';
@@ -19,6 +19,12 @@ export type ItemProviderProps = {
   gap?: string;
 };
 
+function parseCssLength(value: string): number {
+  const parsed = Number.parseFloat(value);
+
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
 export function ItemProvider({
   items,
   showItems,
@@ -31,6 +37,7 @@ export function ItemProvider({
   gap,
 }: ItemProviderProps) {
   const containerRef = useRef<HTMLDivElement>(null);
+  const itemsTrackerRef = useRef<HTMLDivElement>(null);
 
   const [computedValues, setComputedValues] = useState({
     itemWidth: 0,
@@ -39,27 +46,27 @@ export function ItemProvider({
 
   const recalculateItemsSize = useCallback(() => {
     const containerElement = containerRef.current;
+    const trackerElement = itemsTrackerRef.current;
 
-    if (!containerElement) {
+    if (!containerElement || !trackerElement) {
       return;
     }
 
-    const styles = getComputedStyle(containerElement);
+    const containerStyles = getComputedStyle(containerElement);
+    const trackerStyles = getComputedStyle(trackerElement);
 
-    const gap = Number.parseFloat(styles.getPropertyValue('--gap'));
-    const paddingLeft = Number.parseFloat(styles.getPropertyValue('padding-left'));
-    const paddingRight = Number.parseFloat(styles.getPropertyValue('padding-right'));
+    const gapValue = gap ? parseCssLength(gap) : parseCssLength(trackerStyles.columnGap || trackerStyles.gap);
+    const paddingLeft = parseCssLength(containerStyles.paddingLeft);
+    const paddingRight = parseCssLength(containerStyles.paddingRight);
 
-    const itemWidth =
-      (containerElement.getBoundingClientRect().width -
-        (Math.trunc(showItems) - 1) * gap -
-        paddingLeft -
-        paddingRight) /
-      showItems;
-    setComputedValues({ itemWidth, gap });
-  }, [showItems]);
+    const gapsCount = Math.max(Math.trunc(showItems) - 1, 0);
+    const contentWidth = containerElement.getBoundingClientRect().width - paddingLeft - paddingRight;
+    const itemWidth = (contentWidth - gapsCount * gapValue) / showItems;
 
-  useEffect(() => {
+    setComputedValues({ itemWidth, gap: gapValue });
+  }, [showItems, gap]);
+
+  useLayoutEffect(() => {
     const node = containerRef.current;
 
     if (!node) {
@@ -73,8 +80,6 @@ export function ItemProvider({
     return () => observer.disconnect();
   }, [recalculateItemsSize]);
 
-  const itemsTrackerRef = useRef<HTMLDivElement>(null);
-
   const hideNonVisibleItems = () => {
     itemsTrackerRef.current?.querySelectorAll(`[data-test-id=${TEST_IDS.trackItem}]`).forEach(slide => {
       slide.setAttribute('aria-hidden', '0');

package/src/components/ItemProvider/styles.module.scss

@@ -3,11 +3,14 @@
 .itemProvider {
   --gap: #{styles-tokens-carousel.$dimension-2m};
 
-  @include styles-tokens-carousel.composite-var(styles-tokens-carousel.$carousel-content-layout);
-
   overflow-x: hidden;
   width: 100%;
-  margin: calc(0px - styles-tokens-carousel.$space-carousel-content-layout-padding);
+  margin-block: calc(0px - #{styles-tokens-carousel.$space-carousel-content-layout-padding});
+
+  // Only block padding: inline padding created a gutter where the next item
+  // (and its outline) painted through when gap < padding. Card outline is
+  // contained by .itemContainer padding instead.
+  padding-block: styles-tokens-carousel.$space-carousel-content-layout-padding;
 
   &[data-swipe] {
     cursor: grab;
@@ -24,6 +27,9 @@
 .itemContainer {
   flex-shrink: 0;
   box-sizing: border-box;
+  // Reserve space inside the slide for card outline/border so it is not clipped
+  // by overflow and does not paint into a shared gutter with the next slide.
+  padding: styles-tokens-carousel.$border-width-card-container;
 }
 
 .itemTracker {