@wix/patterns 1.363.0 → 1.366.0

package/src/components/EditableTable/useEditableTableCollectionSyncProps.ts

@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+import type { FiltersMap } from '@wix/bex-core';
+import type { EditableTableProps } from './EditableTable';
+
+export function useEditableTableCollectionSyncProps<T, F extends FiltersMap>(
+  props: EditableTableProps<T, F>,
+) {
+  const { state, columns } = props;
+
+  useEffect(() => state.init(columns), [state, columns]);
+}

package/src/components/EditableTable/useEditableTableContextMenu.ts

@@ -0,0 +1,107 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { FiltersMap } from '@wix/bex-core';
+import type { CellInteractionState } from '../../state/EditableTable/CellInteractionState';
+import type { Cell } from '../../state/EditableTable';
+
+const MOUSE_LEAVE_PADDING = 30;
+
+const isInsidePaddedRect = (e: MouseEvent, rect: DOMRect, padding: number) =>
+  e.clientX >= rect.left - padding &&
+  e.clientX <= rect.right + padding &&
+  e.clientY >= rect.top - padding &&
+  e.clientY <= rect.bottom + padding;
+
+export function useEditableTableContextMenu<T, F extends FiltersMap>(
+  cellInteraction: CellInteractionState<T, F>,
+) {
+  const [position, setPosition] = useState<{ x: number; y: number } | null>(
+    null,
+  );
+  const [cell, setCell] = useState<Cell | null>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const cellElRef = useRef<Element | null>(null);
+
+  const handleContextMenu = useCallback(
+    (e: React.MouseEvent) => {
+      const cellEl = (e.target as HTMLElement).closest(
+        '[data-row-key][data-column-id]',
+      );
+      if (!cellEl) {
+        return;
+      }
+
+      e.preventDefault();
+      const rowKey = cellEl.getAttribute('data-row-key')!;
+      const columnId = cellEl.getAttribute('data-column-id')!;
+      if (!cellInteraction.isCellSelected(rowKey, columnId)) {
+        cellInteraction.focusCell(rowKey, columnId);
+      }
+      cellElRef.current = cellEl;
+      setPosition({ x: e.clientX, y: e.clientY });
+      setCell({ rowKey, columnId });
+    },
+    [cellInteraction],
+  );
+
+  const handleClose = useCallback(() => {
+    setPosition(null);
+    setCell(null);
+    cellElRef.current = null;
+  }, []);
+
+  useEffect(() => {
+    if (!position) {
+      return;
+    }
+
+    const isInside = (target: EventTarget | null) =>
+      menuRef.current?.contains(target as Node);
+
+    const onMouseDown = (e: MouseEvent) => {
+      if (!isInside(e.target)) {
+        handleClose();
+      }
+    };
+
+    const onScroll = (e: Event) => {
+      if (!isInside(e.target)) {
+        handleClose();
+      }
+    };
+
+    const onMouseMove = (e: MouseEvent) => {
+      if (!menuRef.current) {
+        return;
+      }
+      const menuRect = menuRef.current.getBoundingClientRect();
+      // Skip until the menu has been laid out
+      if (menuRect.width === 0 || menuRect.height === 0) {
+        return;
+      }
+      // Stay open if cursor is near the menu
+      if (isInsidePaddedRect(e, menuRect, MOUSE_LEAVE_PADDING)) {
+        return;
+      }
+      // Stay open if cursor is on the cell that triggered the menu
+      if (cellElRef.current) {
+        const cellRect = cellElRef.current.getBoundingClientRect();
+        if (isInsidePaddedRect(e, cellRect, 0)) {
+          return;
+        }
+      }
+      handleClose();
+    };
+
+    document.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('scroll', onScroll, true);
+    document.addEventListener('mousemove', onMouseMove);
+
+    return () => {
+      document.removeEventListener('mousedown', onMouseDown);
+      document.removeEventListener('scroll', onScroll, true);
+      document.removeEventListener('mousemove', onMouseMove);
+    };
+  }, [position, handleClose]);
+
+  return { position, cell, menuRef, handleContextMenu, handleClose };
+}

package/src/components/EditableTable/useKeyboardNavigation.ts

@@ -0,0 +1,91 @@
+import { useCallback } from 'react';
+import type { EditableTableState } from '../../state/EditableTable';
+import type { FiltersMap } from '@wix/bex-core';
+
+export function useKeyboardNavigation<T, F extends FiltersMap>(
+  state: EditableTableState<T, F>,
+) {
+  const { cellInteraction, clipboard } = state;
+
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      const { focusedCell, isEditing } = cellInteraction;
+      if (!focusedCell) {
+        return;
+      }
+
+      // Don't intercept keys when editing (let the editor handle them)
+      if (isEditing) {
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          cellInteraction.cancelEdit();
+        } else if (e.key === 'Tab') {
+          e.preventDefault();
+          cellInteraction.commitEdit();
+          if (e.shiftKey) {
+            cellInteraction.moveToPreviousCell();
+          } else {
+            cellInteraction.moveToNextCell();
+          }
+        }
+        return;
+      }
+
+      const isCtrlOrCmd = e.ctrlKey || e.metaKey;
+      const extend = e.shiftKey;
+
+      switch (e.key) {
+        case 'ArrowUp':
+          e.preventDefault();
+          cellInteraction.moveFocus('up', extend);
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          cellInteraction.moveFocus('down', extend);
+          break;
+        case 'ArrowLeft':
+          e.preventDefault();
+          cellInteraction.moveFocus('left', extend);
+          break;
+        case 'ArrowRight':
+          e.preventDefault();
+          cellInteraction.moveFocus('right', extend);
+          break;
+        case 'Tab':
+          e.preventDefault();
+          if (e.shiftKey) {
+            cellInteraction.moveToPreviousCell();
+          } else {
+            cellInteraction.moveToNextCell();
+          }
+          break;
+        case 'Escape':
+          e.preventDefault();
+          if (clipboard.hasCopiedCells) {
+            clipboard.clear();
+          } else {
+            cellInteraction.clearFocus();
+          }
+          break;
+        case 'Delete':
+        case 'Backspace':
+          e.preventDefault();
+          if (!state.updateItemDisabled) {
+            state.clearCells(cellInteraction.selectedCellsList);
+          }
+          break;
+        case 'a':
+          if (isCtrlOrCmd) {
+            e.preventDefault();
+            cellInteraction.selectAll();
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    [cellInteraction, clipboard, state],
+  );
+
+  return { onKeyDown };
+}

package/src/components/EntityPage/EntityPagePlain.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EntityPagePlain1687286502";
+var _namespace_ = "EntityPagePlain1681091989";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"EntityPagePlain1687286502__root"};
+export var classes = {"root":"EntityPagePlain1681091989__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Fade/Fade.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Fade140473283";
+var _namespace_ = "Fade817618918";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Fade140473283__root"};
+export var classes = {"root":"Fade817618918__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Heading/Heading.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading2968453176";
+var _namespace_ = "Heading2420093600";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Heading2968453176__root"};
+export var classes = {"root":"Heading2420093600__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload2853718693";
+var _namespace_ = "ImportStepUpload972892750";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ImportStepUpload2853718693__root","fileUpload":"ImportStepUpload2853718693__fileUpload"};
+export var classes = {"root":"ImportStepUpload972892750__root","fileUpload":"ImportStepUpload972892750__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/InputOverflow/InputOverflow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow3167239132";
+var _namespace_ = "InputOverflow2859286953";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"InputOverflow3167239132__root"};
+export var classes = {"root":"InputOverflow2859286953__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/LoadingRow/LoadingRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow3791399935";
+var _namespace_ = "LoadingRow641118317";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow3791399935__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow3791399935__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow641118317__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow641118317__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/MaxHeightText/MaxHeightText.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxHeightText3994669917";
+var _namespace_ = "MaxHeightText222894855";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MaxHeightText3994669917__root"};
+export var classes = {"root":"MaxHeightText222894855__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MaxLines/MaxLines.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxLines545705138";
+var _namespace_ = "MaxLines3413711216";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MaxLines545705138__root"};
+export var classes = {"root":"MaxLines3413711216__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MultiBulkActionToolbar/MultiBulkActionToolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar2458542829";
+var _namespace_ = "MultiBulkActionToolbar2017077380";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultiBulkActionToolbar2458542829__root","leftGroupWrapper":"MultiBulkActionToolbar2458542829__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2458542829__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2458542829__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar2017077380__root","leftGroupWrapper":"MultiBulkActionToolbar2017077380__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2017077380__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2017077380__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow2764090560";
+var _namespace_ = "NestedTablePlaceholderStatesRow3998706015";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTablePlaceholderStatesRow2764090560__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow3998706015__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow449850700";
+var _namespace_ = "NestedTableRow1007766577";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableRow449850700__root","firstLevel":"NestedTableRow449850700__firstLevel","placeholder":"NestedTableRow449850700__placeholder","parentHovered":"NestedTableRow449850700__parentHovered"};
+export var classes = {"root":"NestedTableRow1007766577__root","firstLevel":"NestedTableRow1007766577__firstLevel","placeholder":"NestedTableRow1007766577__placeholder","parentHovered":"NestedTableRow1007766577__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/useFlatModeColumns.tsx

@@ -26,7 +26,7 @@ export function useFlatModeColumns<C extends string>(
 
   const { selectedOrderedColumnsOrAll } = toolbar;
 
-  const createWSRColumnBase = useCreateWSRColumnBase({ horizontalScroll });
+  const createWSRColumnBase = useCreateWSRColumnBase({ horizontalScroll, showFieldTypeIcons: toolbar.showFieldTypeIcons });
 
   const actionCellColumn = useNestedTableActionCell({
     state: state.flat,

package/src/components/NestedTable/useNestedModeColumns.tsx

@@ -34,7 +34,7 @@ export function useNestedModeColumns<C extends string>(
 
   const { selectedOrderedColumnsOrAll } = toolbar;
 
-  const createWSRColumnBase = useCreateWSRColumnBase({ horizontalScroll });
+  const createWSRColumnBase = useCreateWSRColumnBase({ horizontalScroll, showFieldTypeIcons: toolbar.showFieldTypeIcons });
 
   const actionCellColumn = useNestedTableActionCell({
     state: state.nested,

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect909212706";
+var _namespace_ = "MultipleDragOverlayEffect2755059664";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultipleDragOverlayEffect909212706__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2755059664__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableDragAndDropRow817173986";
+var _namespace_ = "NestedTableDragAndDropRow1618883091";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableDragAndDropRow817173986__root"};
+export var classes = {"root":"NestedTableDragAndDropRow1618883091__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContent.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent2621024629";
+var _namespace_ = "PickerContent3783271928";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContent2621024629__root"};
+export var classes = {"root":"PickerContent3783271928__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep2112299193";
+var _namespace_ = "PickerContentAdditionalStep769599043";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContentAdditionalStep2112299193__root","titles":"PickerContentAdditionalStep2112299193__titles","suffix":"PickerContentAdditionalStep2112299193__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep769599043__root","titles":"PickerContentAdditionalStep769599043__titles","suffix":"PickerContentAdditionalStep769599043__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerTableListItem/PickerTableListItem.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerTableListItem2879372486";
+var _namespace_ = "PickerTableListItem1878736355";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerTableListItem2879372486__root"};
+export var classes = {"root":"PickerTableListItem1878736355__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ScrollableContent/ScrollableContent.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent2145096297";
+var _namespace_ = "ScrollableContent3878505752";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ScrollableContent2145096297__root"};
+export var classes = {"root":"ScrollableContent3878505752__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SkeletonCard/SkeletonCard.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard3016637993";
+var _namespace_ = "SkeletonCard3453398691";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SkeletonCard3016637993__root","headerLoading":"SkeletonCard3016637993__headerLoading"};
+export var classes = {"root":"SkeletonCard3453398691__root","headerLoading":"SkeletonCard3453398691__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SlidingModal/SlidingModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SlidingModal3550523278";
+var _namespace_ = "SlidingModal823534629";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SlidingModal3550523278__root"};
+export var classes = {"root":"SlidingModal823534629__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Suggestions/Suggestions.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import {
-  CarouselWIP,
-  CarouselWIPProps,
+  Carousel,
+  CarouselProps,
   COLOR_TOKENS,
   Box,
 } from '@wix/design-system';
@@ -13,20 +13,22 @@ import { SuggestionsProps } from './types';
 import { VisibilityTrackedCard } from './VisibilityTrackedCard';
 import { SuggestionsProvider } from './SuggestionsContext';
 
-const defaultCarouselProps: CarouselWIPProps = {
-  hideDots: true,
+const defaultCarouselProps: CarouselProps = {
+  dots: false,
   infinite: false,
-  variableWidth: false,
+  variableWidth: true,
+  slideSpacing: 24,
   controlsPosition: 'overlay',
   showControlsShadow: true,
-  sidesGradientColor: COLOR_TOKENS['--wsr-color-D70'],
+  gradientColor: COLOR_TOKENS['--wsr-color-D70'],
+  gradient: true,
   controlsStartEnd: 'hidden',
 };
 
 interface SuggestionsContainerProps {
   count: number;
   children: React.ReactNode;
-  carouselProps?: CarouselWIPProps;
+  carouselProps?: CarouselProps;
   dataHook: string;
   dataState: 'idle' | 'loading';
   maxInlineItems: number;
@@ -67,13 +69,13 @@ const SuggestionsContainer: React.FC<SuggestionsContainerProps> = ({
 
   return (
     <div data-hook={dataHook}>
-      <CarouselWIP
-        dataHook={`suggestions-carousel-${dataState}`}
+      <Carousel
         {...defaultCarouselProps}
         {...carouselProps}
+        dataHook={`suggestions-carousel-${dataState}`}
       >
         {children}
-      </CarouselWIP>
+      </Carousel>
     </div>
   );
 };