@wix/patterns 1.359.0 → 1.363.0

package/src/components/CollectionViewsDropdown/viewsDropdownRenderHelpers.tsx

@@ -9,8 +9,8 @@ import {
   PrivateView,
   ViewsState,
 } from '../../index';
-import { FiltersMap } from '@wix/bex-core';
-import React from 'react';
+import { FiltersMap, TranslationsKeys } from '@wix/bex-core';
+import React, { ReactNode } from 'react';
 
 export function getCategoryName<F extends FiltersMap>({
   category,
@@ -34,14 +34,21 @@ export function buildCategoryOption<F extends FiltersMap>({
   viewsState: ViewsState<F>;
   category: BasicCategory;
 }) {
+  const { translate: t } = viewsState.collection;
+  const categoryName = getCategoryName({ category, viewsState });
+
   return listItemSectionBuilder({
     id: category.id,
-    title: getCategoryName({ category, viewsState }),
+    title: categoryName,
     type: 'subheader',
     dataHook: 'view-category',
-    suffix: category.info ? (
-      <InfoIcon {...{ size: 'small', ...category.info }} />
-    ) : undefined,
+    suffix: (
+      <InfoIcon
+        size="small"
+        content={t('cairo.viewDropdown.category.info' as TranslationsKeys)}
+        tooltipProps={{ maxWidth: 240 }}
+      />
+    ),
   });
 }
 
@@ -61,16 +68,18 @@ export function getViewName<F extends FiltersMap>({
 export function buildViewOption<F extends FiltersMap>({
   viewsState,
   view,
+  suffix,
 }: {
   viewsState: ViewsState<F>;
   view: PrivateView<F>;
+  suffix?: ReactNode;
 }) {
   const viewName = getViewName({ view, viewsState });
-
   return listItemSelectBuilder({
     id: view.id,
     title: viewName,
     label: viewName,
-    dataHook: `view-item`,
+    dataHook: 'view-item',
+    suffix,
   });
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle2342184303";
+var _namespace_ = "DragHandle4263951191";
 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":"DragHandle2342184303__root"};
+export var classes = {"root":"DragHandle4263951191__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EntityPagePlain1608197167";
+var _namespace_ = "EntityPagePlain1687286502";
 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":"EntityPagePlain1608197167__root"};
+export var classes = {"root":"EntityPagePlain1687286502__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_ = "Fade1887979394";
+var _namespace_ = "Fade140473283";
 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":"Fade1887979394__root"};
+export var classes = {"root":"Fade140473283__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/FiltersPanel/FilterAccordionResetButton.tsx

@@ -0,0 +1,41 @@
+import { TextButton } from '@wix/design-system';
+import React from 'react';
+import { Filter } from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { observer } from 'mobx-react-lite';
+import { FilterToolbarState } from '../../providers';
+
+export interface FilterAccordionResetButtonProps<V> {
+  state: FilterToolbarState;
+  filter: Filter<V>;
+}
+
+function _FilterAccordionResetButton<V>(
+  props: FilterAccordionResetButtonProps<V>,
+) {
+  const { state } = props;
+  const { translate: t } = useWixPatternsContainer();
+
+  const filter = state.getPendingFilter(props.filter);
+
+  if (filter.isEmpty) {
+    return null;
+  }
+
+  return (
+    <TextButton
+      dataHook={`reset-filter-${filter.name}`}
+      size="medium"
+      onClick={(e: React.MouseEvent) => {
+        e.stopPropagation();
+        filter.reset({ emitEvents: ['change', 'refresh'] });
+      }}
+    >
+      {t('cairo.filtersPanel.reset')}
+    </TextButton>
+  );
+}
+
+export const FilterAccordionResetButton = observer(
+  _FilterAccordionResetButton,
+);

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading1786796010";
+var _namespace_ = "Heading2968453176";
 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":"Heading1786796010__root"};
+export var classes = {"root":"Heading2968453176__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/ImportButtonModalLayout.tsx

@@ -1,4 +1,11 @@
-import { Box, CustomModalLayout } from '@wix/design-system';
+import {
+  Box,
+  Button,
+  CustomModalLayout,
+  Heading,
+  ModalMobileLayout,
+  Text,
+} from '@wix/design-system';
 import { getImportModalStepProps } from './getImportModalStepProps';
 import React, { useEffect, useState } from 'react';
 import { observer } from 'mobx-react-lite';
@@ -8,6 +15,8 @@ import { addEventListener } from '@wix/bex-core/util';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { CustomDrawerLayout } from '../CustomDrawerLayout';
 import { ImportStepper } from './ImportStepper';
+import { MessageActionModal } from '../ActionModal';
+import { ModalWrapper } from '../CollectionModal';
 
 function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
   const {
@@ -38,11 +47,12 @@ function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
     ...customModalLayoutProps
   } = getImportModalStepProps({
     state,
+    isMobile,
   });
 
   const wrappedChildren =
     state.currentStep !== 'progress' ? (
-      <Box direction="vertical" gap="SP3" width="100%">
+      <Box direction="vertical" gap="SP3" width="100%" height="100%">
         <ImportStepper
           state={state}
           removeContentPadding={!removeContentPadding}
@@ -67,27 +77,83 @@ function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
 
   useEffect(() => state.init(), []);
 
+  const t = state.translate;
+
+  const { modal: discardModal } = state.discardChangesModal;
+
   if (isMobile) {
     return (
-      <CustomDrawerLayout
+      <>
+        <CustomDrawerLayout
+          dataHook="import-modal-layout"
+          removeContentPadding={removeContentPadding}
+          {...rest}
+          {...customModalLayoutProps}
+          children={wrappedChildren}
+        />
+        <ModalWrapper
+          state={discardModal}
+          onAfterClose={() => state.discardChangesModal.afterClose()}
+        >
+          <ModalMobileLayout
+            dataHook="import-discard-changes-modal"
+            title={
+              <Heading size="small">
+                {t('cairo.import.discardChanges.title')}
+              </Heading>
+            }
+            content={
+              <Text>{t('cairo.import.discardChanges.description')}</Text>
+            }
+            onCloseButtonClick={() => discardModal.close()}
+            stickyFooter
+            footer={
+              <Box direction="vertical" gap="SP3">
+                <Button
+                  dataHook="import-discard-confirm"
+                  fullWidth
+                  skin="destructive"
+                  onClick={() => discardModal.confirm()}
+                >
+                  {t('cairo.import.discardChanges.confirm')}
+                </Button>
+                <Button
+                  dataHook="import-discard-cancel"
+                  fullWidth
+                  priority="secondary"
+                  onClick={() => discardModal.decline()}
+                >
+                  {t('cairo.import.discardChanges.cancel')}
+                </Button>
+              </Box>
+            }
+          />
+        </ModalWrapper>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <CustomModalLayout
+        width="600px"
+        maxHeight="80vh"
         dataHook="import-modal-layout"
         removeContentPadding={removeContentPadding}
         {...rest}
         {...customModalLayoutProps}
         children={wrappedChildren}
       />
-    );
-  }
-
-  return (
-    <CustomModalLayout
-      width="600px"
-      dataHook="import-modal-layout"
-      removeContentPadding={removeContentPadding}
-      {...rest}
-      {...customModalLayoutProps}
-      children={wrappedChildren}
-    />
+      <MessageActionModal
+        dataHook="import-discard-changes-modal"
+        state={state.discardChangesModal}
+        title={t('cairo.import.discardChanges.title')}
+        content={t('cairo.import.discardChanges.description')}
+        primaryButtonText={t('cairo.import.discardChanges.confirm')}
+        secondaryButtonText={t('cairo.import.discardChanges.cancel')}
+        theme="destructive"
+      />
+    </>
   );
 }
 

package/src/components/ImportButton/ImportModal.uni.driver.ts

@@ -4,6 +4,7 @@ import {
   CounterBadgeUniDriver,
   CustomModalLayoutUniDriver,
   DropdownUniDriver,
+  MessageModalLayoutUniDriver,
   ModalUniDriver,
   TextUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
@@ -76,6 +77,9 @@ export function ImportModalUniDriver(base: UniDriver, body: UniDriver) {
     uploadErrorExists: () =>
       modalLayoutBase().$('[data-hook="import-upload-error"]').exists(),
 
+    noRowsWarningExists: () =>
+      modalLayoutBase().$('[data-hook="import-no-rows-warning"]').exists(),
+
     getProgressLabel: () => progressLabelBase().text(),
     progressLabelExists: () => progressLabelBase().exists(),
 
@@ -102,6 +106,13 @@ export function ImportModalUniDriver(base: UniDriver, body: UniDriver) {
         modalLayoutBase().$(`[data-hook="import-mapping-${header}"]`),
         body,
       ),
+
+    /** Get the discard changes confirmation modal driver */
+    getDiscardChangesModal: () =>
+      MessageModalLayoutUniDriver(
+        body.$('[data-hook="import-discard-changes-modal"]'),
+        body,
+      ),
   };
 }
 

package/src/components/ImportButton/ImportStepConfiguration.tsx

@@ -1,11 +1,10 @@
 import {
   Box,
-  CounterBadge,
   Dropdown,
-  Heading,
   Text,
   TableListItem,
   listItemSelectBuilder,
+  SectionHelper,
 } from '@wix/design-system';
 import { ArrowRight } from '@wix/wix-ui-icons-common';
 import { ImportState } from '@wix/bex-core';
@@ -21,11 +20,12 @@ const COLUMN_WIDTHS = {
   arrow: '1fr',
   field: 'minmax(0, 250px)',
 };
+const SCROLLBAR_GUTTER: React.CSSProperties = { scrollbarGutter: 'stable' };
 
 function _ImportStepConfiguration({ state }: ImportStepConfigurationProps) {
   const { csvHeaders, fields, translate: t } = state;
 
-  const dropdownOptions = fields
+  const baseDropdownOptions = fields
     .filter((field) => field.id != null)
     .map((field) =>
       listItemSelectBuilder({
@@ -35,28 +35,25 @@ function _ImportStepConfiguration({ state }: ImportStepConfigurationProps) {
       }),
     );
 
+  const { selectedFieldIds } = state;
+
+  const hasNoRows = state.csvRows.length === 0;
+
   return (
-    <Box direction="vertical" dataHook="import-mapping-step">
-      <Box
-        direction="horizontal"
-        gap="SP2"
-        verticalAlign="middle"
-        paddingLeft="SP4"
-        paddingRight="SP4"
-        paddingTop="SP1"
-        paddingBottom="SP2"
-      >
-        <Heading size="small">{t('cairo.import.columnsFound')}</Heading>
-        <CounterBadge
-          size="medium"
-          skin="neutralLight"
-          dataHook="import-columns-found-counter"
-        >
-          {csvHeaders.length}
-        </CounterBadge>
-      </Box>
+    <Box direction="vertical" dataHook="import-mapping-step" gap="SP3">
+      {hasNoRows && (
+        <Box padding="0 SP4">
+          <SectionHelper
+            dataHook="import-no-rows-warning"
+            skin="warning"
+            title={t('cairo.import.noRowsWarningTitle')}
+          >
+            {t('cairo.import.noRowsWarningDescription')}
+          </SectionHelper>
+        </Box>
+      )}
 
-      <div style={{ overflowY: 'auto', maxHeight: '340px' }}>
+      <Box direction="vertical" flex={1} minHeight={0}>
         <Box
           display="grid"
           direction="horizontal"
@@ -65,7 +62,8 @@ function _ImportStepConfiguration({ state }: ImportStepConfigurationProps) {
           backgroundColor="var(--wds-color-fill-surface-neutral,var(--wsr-color-D75, #F7F8F8))"
           boxShadow="inset 0 1px 0 0 var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB)), inset 0 -1px 0 0 var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB))"
           gridTemplateColumns={`${COLUMN_WIDTHS.title} ${COLUMN_WIDTHS.arrow} ${COLUMN_WIDTHS.field}`}
-          style={{ position: 'sticky', top: 0, zIndex: 1 }}
+          flexShrink={0}
+          style={SCROLLBAR_GUTTER}
         >
           <Box minWidth={0} direction="vertical">
             <Text size="small" weight="thin" ellipsis>
@@ -82,56 +80,68 @@ function _ImportStepConfiguration({ state }: ImportStepConfigurationProps) {
           </Box>
         </Box>
 
-        {csvHeaders.map((header) => (
-          <TableListItem
-            key={header}
-            showDivider
-            options={[
-              {
-                value: (
-                  <Text ellipsis size="small">
-                    {header}
-                  </Text>
-                ),
-                width: COLUMN_WIDTHS.title,
-              },
-              {
-                value: (
-                  <Box align="center">
-                    <ArrowRight />
-                  </Box>
-                ),
-                width: COLUMN_WIDTHS.arrow,
-              },
-              {
-                value: (
-                  <Dropdown
-                    dataHook={`import-mapping-${header}`}
-                    clearButton
-                    onClear={() => {
-                      state.setMapping(header, null);
-                    }}
-                    placeholder={t('cairo.import.skipColumn')}
-                    selectedId={state.mappingByHeader[header] ?? undefined}
-                    onSelect={({ id }) => {
-                      state.setMapping(header, id as string);
-                    }}
-                    popoverProps={{
-                      appendTo: 'window',
-                      zIndex: 5001,
-                      flip: true,
-                      fixed: false,
-                    }}
-                    options={dropdownOptions}
-                    size="small"
-                  />
-                ),
-                width: COLUMN_WIDTHS.field,
-              },
-            ]}
-          />
-        ))}
-      </div>
+        <Box
+          direction="vertical"
+          overflowY="auto"
+          maxHeight={hasNoRows ? 'calc(80vh - 420px)' : 'calc(80vh - 300px)'}
+          style={SCROLLBAR_GUTTER}
+        >
+          {csvHeaders.map((header, index) => (
+            <TableListItem
+              key={header}
+              showDivider={index < csvHeaders.length - 1}
+              options={[
+                {
+                  value: (
+                    <Text ellipsis size="small">
+                      {header}
+                    </Text>
+                  ),
+                  width: COLUMN_WIDTHS.title,
+                },
+                {
+                  value: (
+                    <Box align="center">
+                      <ArrowRight />
+                    </Box>
+                  ),
+                  width: COLUMN_WIDTHS.arrow,
+                },
+                {
+                  value: (
+                    <Dropdown
+                      dataHook={`import-mapping-${header}`}
+                      clearButton
+                      onClear={() => {
+                        state.setMapping(header, null);
+                      }}
+                      placeholder={t('cairo.import.skipColumn')}
+                      selectedId={state.mappingByHeader[header] ?? undefined}
+                      onSelect={({ id }) => {
+                        state.setMapping(header, id as string);
+                      }}
+                      popoverProps={{
+                        appendTo: 'window',
+                        zIndex: 5001,
+                        flip: true,
+                        fixed: false,
+                      }}
+                      options={baseDropdownOptions.map((option) => ({
+                        ...option,
+                        disabled:
+                          selectedFieldIds.has(String(option.id)) &&
+                          state.mappingByHeader[header] !== String(option.id),
+                      }))}
+                      size="small"
+                    />
+                  ),
+                  width: COLUMN_WIDTHS.field,
+                },
+              ]}
+            />
+          ))}
+        </Box>
+      </Box>
     </Box>
   );
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload2373340862";
+var _namespace_ = "ImportStepUpload2853718693";
 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":"ImportStepUpload2373340862__root","fileUpload":"ImportStepUpload2373340862__fileUpload"};
+export var classes = {"root":"ImportStepUpload2853718693__root","fileUpload":"ImportStepUpload2853718693__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/ImportStepper.tsx

@@ -38,9 +38,19 @@ function _ImportStepper({ state, removeContentPadding }: ImportStepperProps) {
 
   const contentPadding = removeContentPadding ? undefined : 'SP4';
 
+  const handleStepClick = (stepIndex: number) => {
+    if (stepIndex < activeStep) {
+      state.discardAndGoBack();
+    }
+  };
+
   return (
     <Box paddingLeft={contentPadding} paddingRight={contentPadding}>
-      <Stepper activeStep={activeStep} steps={steps} />
+      <Stepper
+        activeStep={activeStep}
+        steps={steps}
+        onClick={handleStepClick}
+      />
     </Box>
   );
 }

package/src/components/ImportButton/getImportModalStepProps.tsx

@@ -1,6 +1,8 @@
 import {
   Box,
+  CounterBadge,
   CustomModalLayoutProps,
+  Heading,
   Text,
   TextButton,
 } from '@wix/design-system';
@@ -12,10 +14,12 @@ import { ImportStepProgress } from './ImportStepProgress';
 
 export interface GetImportModalStepProps {
   state: ImportState;
+  isMobile?: boolean;
 }
 
 export function getImportModalStepProps({
   state,
+  isMobile,
 }: GetImportModalStepProps): Partial<
   CustomModalLayoutProps & { children?: ReactNode; onRequestClose?: () => void }
 > {
@@ -43,25 +47,61 @@ export function getImportModalStepProps({
   }
 
   if (currentStep === 'configuration') {
+    const handleClose = () => state.discardAndClose();
+
     return {
       removeContentPadding: true,
-      title: t('cairo.import.configureMappingsTitle'),
+      title: isMobile ? (
+        <Box gap="SP1" verticalAlign="middle" direction="horizontal">
+          {t('cairo.import.configureMappingsTitle')}
+          <CounterBadge
+            size="medium"
+            skin="neutralLight"
+            dataHook="import-columns-found-counter"
+          >
+            {state.csvHeaders.length}
+          </CounterBadge>
+        </Box>
+      ) : (
+        <Box gap="SP1" verticalAlign="middle" direction="horizontal">
+          <Heading size="medium">
+            {t('cairo.import.configureMappingsTitle')}
+          </Heading>
+          <CounterBadge
+            size="medium"
+            skin="neutralLight"
+            dataHook="import-columns-found-counter"
+          >
+            {state.csvHeaders.length}
+          </CounterBadge>
+        </Box>
+      ),
       subtitle: t('cairo.import.subtitle'),
       children: <ImportStepConfiguration state={state} />,
       showFooterDivider: true,
       primaryButtonText: t('cairo.import.startImport'),
-      primaryButtonOnClick: state.startImport,
-      primaryButtonProps: { disabled: !state.hasMappings },
-      secondaryButtonText: t('cairo.import.back'),
-      secondaryButtonOnClick: state.goToUpload,
-      closeButtonProps: { onClick: state.close, autoFocus: true },
-      onRequestClose: state.close,
+      primaryButtonOnClick: state.hasMappings ? state.startImport : undefined,
+      ...(isMobile
+        ? { primaryButtonProps: { disabled: !state.hasMappings } }
+        : {
+            primaryButtonTooltipProps: !state.hasMappings
+              ? { content: t('cairo.import.noMappingsTooltip') }
+              : undefined,
+          }),
+      secondaryButtonText: t('cairo.import.cancel'),
+      secondaryButtonOnClick: handleClose,
+      closeButtonProps: {
+        onClick: handleClose,
+        autoFocus: true,
+      },
+      onRequestClose: handleClose,
     };
   }
 
   return {
     title: t('cairo.import.progressTitle'),
     children: <ImportStepProgress state={state} />,
+    showFooterDivider: false,
     primaryButtonText: t('cairo.import.importing'),
     primaryButtonProps: { disabled: true },
     secondaryButtonText: state.isRestoring