@wix/patterns 1.413.0 → 1.415.0

package/src/components/FiltersPanel/FiltersPanelState.ts

@@ -1,7 +1,7 @@
 import { ToolbarCollectionState } from '../../state';
 import { FiltersMap, withoutDefaults } from '@wix/bex-core';
 import { cairoFiltersPanelUsed } from '@wix/bex-core/bi';
-import { action } from 'mobx';
+import { action, makeObservable, observable } from 'mobx';
 
 export interface FiltersPanelStateParams<T, F extends FiltersMap> {
   readonly toolbar: ToolbarCollectionState<T, F>;
@@ -10,8 +10,24 @@ export interface FiltersPanelStateParams<T, F extends FiltersMap> {
 export class FiltersPanelState<T, F extends FiltersMap> {
   readonly toolbar;
 
+  searchValue = '';
+
   constructor(params: FiltersPanelStateParams<T, F>) {
     this.toolbar = params.toolbar;
+
+    makeObservable(this, {
+      searchValue: observable.ref,
+      setSearchValue: action.bound,
+      clearSearch: action.bound,
+    });
+  }
+
+  setSearchValue(value: string) {
+    this.searchValue = value;
+  }
+
+  clearSearch() {
+    this.searchValue = '';
   }
 
   onCloseButtonClick = action(async () => {
@@ -23,6 +39,8 @@ export class FiltersPanelState<T, F extends FiltersMap> {
       return;
     }
 
+    this.clearSearch();
+
     panels.closeSidePanel();
     reportBi(
       withoutDefaults(cairoFiltersPanelUsed)({

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading1860446760";
+var _namespace_ = "Heading1825965899";
 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":"Heading1860446760__root"};
+export var classes = {"root":"Heading1825965899__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_ = "ImportStepUpload3520625931";
+var _namespace_ = "ImportStepUpload2707926533";
 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":"ImportStepUpload3520625931__root","fileUpload":"ImportStepUpload3520625931__fileUpload"};
+export var classes = {"root":"ImportStepUpload2707926533__root","fileUpload":"ImportStepUpload2707926533__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_ = "InputOverflow1024375257";
+var _namespace_ = "InputOverflow321109859";
 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":"InputOverflow1024375257__root"};
+export var classes = {"root":"InputOverflow321109859__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_ = "LoadingRow3948357212";
+var _namespace_ = "LoadingRow2597706729";
 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":"LoadingRow3948357212__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow3948357212__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow2597706729__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow2597706729__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_ = "MaxHeightText1626901953";
+var _namespace_ = "MaxHeightText1358108207";
 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":"MaxHeightText1626901953__root"};
+export var classes = {"root":"MaxHeightText1358108207__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_ = "MaxLines2316702761";
+var _namespace_ = "MaxLines3201845425";
 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":"MaxLines2316702761__root"};
+export var classes = {"root":"MaxLines3201845425__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_ = "MultiBulkActionToolbar1490296512";
+var _namespace_ = "MultiBulkActionToolbar2262240796";
 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":"MultiBulkActionToolbar1490296512__root","leftGroupWrapper":"MultiBulkActionToolbar1490296512__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1490296512__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1490296512__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar2262240796__root","leftGroupWrapper":"MultiBulkActionToolbar2262240796__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2262240796__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2262240796__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_ = "NestedTablePlaceholderStatesRow2496254971";
+var _namespace_ = "NestedTablePlaceholderStatesRow950851298";
 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":"NestedTablePlaceholderStatesRow2496254971__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow950851298__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_ = "NestedTableRow2721334238";
+var _namespace_ = "NestedTableRow1953079660";
 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":"NestedTableRow2721334238__root","firstLevel":"NestedTableRow2721334238__firstLevel","placeholder":"NestedTableRow2721334238__placeholder","parentHovered":"NestedTableRow2721334238__parentHovered"};
+export var classes = {"root":"NestedTableRow1953079660__root","firstLevel":"NestedTableRow1953079660__firstLevel","placeholder":"NestedTableRow1953079660__placeholder","parentHovered":"NestedTableRow1953079660__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect3361943102";
+var _namespace_ = "MultipleDragOverlayEffect954955633";
 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":"MultipleDragOverlayEffect3361943102__root"};
+export var classes = {"root":"MultipleDragOverlayEffect954955633__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_ = "NestedTableDragAndDropRow358505650";
+var _namespace_ = "NestedTableDragAndDropRow2342687242";
 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":"NestedTableDragAndDropRow358505650__root"};
+export var classes = {"root":"NestedTableDragAndDropRow2342687242__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_ = "PickerContent3044108310";
+var _namespace_ = "PickerContent1991971225";
 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":"PickerContent3044108310__root"};
+export var classes = {"root":"PickerContent1991971225__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_ = "PickerContentAdditionalStep4168801244";
+var _namespace_ = "PickerContentAdditionalStep2347860189";
 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":"PickerContentAdditionalStep4168801244__root","titles":"PickerContentAdditionalStep4168801244__titles","suffix":"PickerContentAdditionalStep4168801244__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2347860189__root","titles":"PickerContentAdditionalStep2347860189__titles","suffix":"PickerContentAdditionalStep2347860189__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_ = "PickerTableListItem1824403770";
+var _namespace_ = "PickerTableListItem743710588";
 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":"PickerTableListItem1824403770__root"};
+export var classes = {"root":"PickerTableListItem743710588__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_ = "ScrollableContent3179610547";
+var _namespace_ = "ScrollableContent1998605952";
 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":"ScrollableContent3179610547__root"};
+export var classes = {"root":"ScrollableContent1998605952__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SetupWidget/AllCompleteState.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Card, Box, Heading, Text, Button } from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { observer } from 'mobx-react-lite';
+
+export interface AllCompleteStateProps {
+  dataHook?: string;
+  /** Fired when the celebratory CTA is clicked. */
+  onCtaClick?: () => void;
+}
+
+/**
+ * Shown when every step is completed. Built from WDS primitives only (no
+ * illustration assets yet — a richer happy-moment hero is a later design
+ * handoff). Mirrors the "You're all set" variant of the existing widget.
+ */
+export const AllCompleteState = observer(
+  ({ dataHook, onCtaClick }: AllCompleteStateProps) => {
+    const { translate: t } = useWixPatternsContainer();
+
+    return (
+      <Card dataHook={dataHook}>
+        <Box
+          dataHook="setup-all-complete"
+          direction="vertical"
+          padding="SP9"
+          align="center"
+          backgroundColor="B50"
+          gap="SP3"
+        >
+          <Heading size="medium">
+            {t('cairo.setupWidget.allComplete.title')}
+          </Heading>
+          <Text size="medium" secondary>
+            {t('cairo.setupWidget.allComplete.subtitle')}
+          </Text>
+          <Box gap="SP2">
+            <Button priority="primary" onClick={onCtaClick}>
+              {t('cairo.setupWidget.allComplete.cta')}
+            </Button>
+          </Box>
+        </Box>
+      </Card>
+    );
+  },
+);

package/src/components/SetupWidget/SetupStepCard.tsx

@@ -0,0 +1,166 @@
+import React from 'react';
+import {
+  Box,
+  Text,
+  Button,
+  TextButton,
+  Badge,
+  Tooltip,
+} from '@wix/design-system';
+import { SetupWidgetStep } from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { SetupStepIcon } from './SetupStepIcon';
+import { st, classes } from './SetupWidget.st.css.js';
+
+export interface SetupStepCardProps {
+  step: SetupWidgetStep;
+  /** The recommended next step — soft blue surface + primary CTA. */
+  isPrimary: boolean;
+  /** Inline content is shown below the header. */
+  expanded: boolean;
+  onActivate: () => void;
+  renderStepContent?: (step: SetupWidgetStep) => React.ReactNode;
+}
+
+/**
+ * Mobile step card. Phase-1 layout ("matching desktop"): shadowed card, the
+ * focused card gets a soft blue surface, an "In progress" badge sits under the
+ * title, completed cards strike the title and drop the CTA. Story-only
+ * experiment knobs (peach shell / colored bullet / hero art / full-screen
+ * modal) are intentionally omitted — those are consumer/page concerns.
+ */
+export const SetupStepCard = ({
+  step,
+  isPrimary,
+  expanded,
+  onActivate,
+  renderStepContent,
+}: SetupStepCardProps) => {
+  const { translate: t } = useWixPatternsContainer();
+
+  const isInProgress = step.status === 'in-progress';
+  const isCompleted = step.status === 'completed';
+  const isDisabled = step.status === 'disabled';
+  const isInline = step.expansionMode === 'inline';
+  const isInlineExpanded = expanded && isInline;
+
+  // The whole card toggles inline steps; navigate steps act via the CTA.
+  const clickable = isInline && !isCompleted && !isDisabled;
+
+  return (
+    <div
+      data-hook={`setup-step-${step.id}`}
+      className={st(classes.card, { primary: isPrimary, clickable })}
+      onClick={clickable ? onActivate : undefined}
+      role={clickable ? 'button' : undefined}
+      tabIndex={clickable ? 0 : undefined}
+      onKeyDown={
+        clickable
+          ? (event: React.KeyboardEvent) => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                onActivate();
+              }
+            }
+          : undefined
+      }
+    >
+      <Box direction="vertical" gap="SP2" padding="SP4">
+        <Box gap="SP2" verticalAlign="top">
+          <SetupStepIcon status={step.status} />
+          <Box direction="vertical" gap="SP1">
+            <Text
+              dataHook={`setup-step-title-${step.id}`}
+              size="small"
+              weight={isPrimary ? 'bold' : 'thin'}
+              skin={isDisabled ? 'disabled' : 'standard'}
+              secondary={isCompleted}
+            >
+              {isCompleted ? <del>{step.title}</del> : step.title}
+            </Text>
+            {isInProgress && (
+              <Box>
+                <Badge size="tiny" skin="urgent" type="transparent">
+                  {t('cairo.setupWidget.step.inProgress')}
+                </Badge>
+              </Box>
+            )}
+          </Box>
+        </Box>
+
+        {!isCompleted && step.description && (
+          <Text size="small" secondary>
+            {step.description}
+          </Text>
+        )}
+
+        {isInlineExpanded && (
+          <Box dataHook={`setup-step-content-${step.id}`} direction="vertical">
+            {/* Stop clicks/keys inside the consumer widget from bubbling to
+                the card's toggle handler — otherwise interacting with the
+                content (e.g. an input) would collapse the card. */}
+            <div
+              onClick={(event) => event.stopPropagation()}
+              onKeyDown={(event) => event.stopPropagation()}
+            >
+              {renderStepContent?.(step)}
+            </div>
+          </Box>
+        )}
+
+        {!isCompleted &&
+          !isInlineExpanded &&
+          step.ctaLabel &&
+          (() => {
+            const ctaButton = (
+              <Button
+                dataHook={`setup-step-cta-${step.id}`}
+                fullWidth
+                size="medium"
+                priority={isPrimary ? 'primary' : 'secondary'}
+                disabled={isDisabled}
+                onClick={(event: React.MouseEvent) => {
+                  event.stopPropagation();
+                  onActivate();
+                }}
+              >
+                {step.ctaLabel}
+              </Button>
+            );
+
+            // Disabled steps explain why the CTA is disabled (G5).
+            return isDisabled ? (
+              <Tooltip
+                dataHook={`setup-step-disabled-tooltip-${step.id}`}
+                content={
+                  step.disabledTooltip ??
+                  // Translation-key id stays `lockedTooltip` until the
+                  // Translation Center key is renamed (TC follow-up to T2).
+                  t('cairo.setupWidget.step.lockedTooltip')
+                }
+              >
+                <Box>{ctaButton}</Box>
+              </Tooltip>
+            ) : (
+              ctaButton
+            );
+          })()}
+
+        {isCompleted && step.completedCtaLabel && !isDisabled && (
+          <Box>
+            <TextButton
+              dataHook={`setup-step-cta-${step.id}`}
+              size="small"
+              onClick={(event: React.MouseEvent) => {
+                event.stopPropagation();
+                onActivate();
+              }}
+            >
+              {step.completedCtaLabel}
+            </TextButton>
+          </Box>
+        )}
+      </Box>
+    </div>
+  );
+};