@wix/patterns 1.360.0 → 1.364.0

package/src/components/CollectionToolbarFilters/CollectionToolbarFilters.tsx

@@ -5,6 +5,7 @@ import React, {
   useMemo,
   useState,
 } from 'react';
+import { Box } from '@wix/design-system';
 import { FilterElement } from './filterElement';
 import { useFiltersLayout } from './useFiltersLayout';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
@@ -13,6 +14,7 @@ import { observer } from 'mobx-react-lite';
 import { ToolbarItemBox } from '../ToolbarItemBox';
 import { AppliedFiltersTagListState } from '../AppliedFiltersTagList/AppliedFiltersTagListState';
 import { CollectionToolbarFiltersState } from './CollectionToolbarFiltersState';
+import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
 import { CollectionFilter } from '../CollectionFilter';
 import { FiltersPanelSidePanelEntry } from './FiltersPanelSidePanelEntry';
 import { MoreFiltersCTA } from '../MoreFiltersCTA';
@@ -217,19 +219,27 @@ function _CollectionToolbarFilters(props: CollectionToolbarFiltersProps) {
     };
   }, [hideAppliedFiltersTagList]);
 
+  const showFieldTypeIcons = state.showFieldTypeIcons;
+
   return (
     // workaround to support bad enzyme version not detecting this as a valid fragment component
     // https://wix.slack.com/archives/C02K83200PL/p1671962461443749
     <Fragment key="toolbar-items">
       {childrenArr.slice(0, totalInlineFilters).map((element, index) => {
         const { props: filterProps } = element;
+        const toolbarLabel = filterProps.toolbarItemProps?.label;
+        let label: React.ReactNode = showLabels && toolbarLabel;
+        if (showFieldTypeIcons && showLabels && toolbarLabel) {
+          const toolbarIcon = getFieldTypeIcon({ fieldType: filterProps.fieldType, size: 'medium' });
+          label = <Box gap="SP1" verticalAlign="middle">{toolbarIcon}{toolbarLabel}</Box>;
+        }
 
         return (
           <ToolbarItemBox
             key={index}
             layout={filterProps.layout}
             dataHook={`toolbar-item-filter-${index}`}
-            label={showLabels && filterProps.toolbarItemProps?.label}
+            label={label}
           >
             {filterProps.filter ? (
               <CollectionFilter

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

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

package/src/components/CustomColumnsPanel/ColumnListTableListItem.tsx

@@ -7,6 +7,7 @@ import { CustomColumnsState } from '../../state';
 import { GridCardItemProps } from '../DragAndDrop';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
 
 export interface ColumnListTableListItemProps<T, F extends FiltersMap>
   extends GridCardItemProps {
@@ -35,8 +36,10 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
 
   const { collectionDataExtension } = useToolbarCollectionContext();
   const { translate: t } = useWixPatternsContainer();
+  const showFieldTypeIcons = state.table.showFieldTypeIcons;
 
   const { infoTooltipProps } = column;
+  const prefixIcon = showFieldTypeIcons ? getFieldTypeIcon({ fieldType: column.fieldType }) : null;
 
   const checkboxDisabled = !column.hideable;
   const hasSearchValue = state.searchValue.trim().length > 0;
@@ -117,9 +120,10 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
         options={[
           {
             value: (
-              <Box>
+              <Box {...(prefixIcon ? { verticalAlign: 'middle' } : {})}>
                 <div
                   style={{
+                    ...(prefixIcon ? { display: 'flex', alignItems: 'center' } : {}),
                     padding: '0 6px',
                     cursor: checkboxDisabled ? undefined : 'pointer',
                     wordBreak: 'break-word',
@@ -131,6 +135,11 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
                     state.onColumnCheckboxToggle(column);
                   }}
                 >
+                  {prefixIcon && (
+                    <Box align="center" verticalAlign="middle" marginRight="SP1" flexShrink={0}>
+                      {prefixIcon}
+                    </Box>
+                  )}
                   <Text size="small" dataHook="tableListItem-label">
                     {column.name || column.title || column.id}
                   </Text>

package/src/components/CustomFieldFilters/buildCustomFieldFilterElement.tsx

@@ -7,6 +7,7 @@ import { FilterProps } from '../../model';
 import { CheckboxCustomFieldFilter } from './CheckboxCustomFieldFilter';
 import { NumberRangeFilter } from '../NumberRangeFilter';
 import { OperatorFilterCustomFieldFilter } from './OperatorFilterCustomFieldFilter';
+import { toFieldType } from '../../utils/fieldTypePrefixIcons';
 
 export const buildCustomFieldFilterElement = <T, F extends FiltersMap>(
   state: ToolbarCollectionState<T, F>,
@@ -38,6 +39,7 @@ export const buildCustomFieldFilterElement = <T, F extends FiltersMap>(
     <CustomFieldFilterComponent
       key={customField.id}
       filter={state.collection.filters[customField.id]!}
+      fieldType={toFieldType(customField.type)}
       accordionItemProps={{
         label,
       }}

package/src/components/CustomFieldModal/CustomFieldTypeDropdown.tsx

@@ -1,16 +1,9 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { Box, Dropdown, listItemSelectBuilder } from '@wix/design-system';
-import {
-  Checkbox,
-  Date,
-  DateAndTime,
-  Number,
-  Rename,
-  Link,
-} from '@wix/wix-ui-icons-common';
 import { CustomFieldModalState, CustomFieldType } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
 
 export interface CustomFieldTypeDropdownProps {
   state: CustomFieldModalState;
@@ -38,7 +31,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'shortText',
       prefix: (
         <Box>
-          <Rename />
+          {getFieldTypeIcon({ fieldType: 'SHORT_TEXT', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.shortText'),
@@ -49,7 +42,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'longText',
       prefix: (
         <Box>
-          <Rename />
+          {getFieldTypeIcon({ fieldType: 'LONG_TEXT', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.longText'),
@@ -60,7 +53,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'date',
       prefix: (
         <Box>
-          <Date />
+          {getFieldTypeIcon({ fieldType: 'DATE', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.date'),
@@ -71,7 +64,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'dateTime',
       prefix: (
         <Box>
-          <DateAndTime />
+          {getFieldTypeIcon({ fieldType: 'DATE_TIME', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.dateAndTime'),
@@ -82,7 +75,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'integer',
       prefix: (
         <Box>
-          <Number />
+          {getFieldTypeIcon({ fieldType: 'INTEGER', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.numberInteger'),
@@ -93,7 +86,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'decimal',
       prefix: (
         <Box>
-          <Number />
+          {getFieldTypeIcon({ fieldType: 'DECIMAL', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.numberDecimal'),
@@ -104,7 +97,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'checkbox',
       prefix: (
         <Box>
-          <Checkbox />
+          {getFieldTypeIcon({ fieldType: 'CHECKBOX', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.checkbox'),
@@ -115,7 +108,7 @@ export const _CustomFieldTypeDropdown = (
       id: 'url',
       prefix: (
         <Box>
-          <Link />
+          {getFieldTypeIcon({ fieldType: 'URL', size: 'medium' })}
         </Box>
       ),
       title: t('cairo.customFields.fieldType.url'),

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle2576753877";
+var _namespace_ = "DragHandle3347869420";
 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":"DragHandle2576753877__root"};
+export var classes = {"root":"DragHandle3347869420__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_ = "EntityPagePlain875261530";
+var _namespace_ = "EntityPagePlain2305275193";
 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":"EntityPagePlain875261530__root"};
+export var classes = {"root":"EntityPagePlain2305275193__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_ = "Fade3970104487";
+var _namespace_ = "Fade2577267590";
 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":"Fade3970104487__root"};
+export var classes = {"root":"Fade2577267590__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_ = "Heading3688798431";
+var _namespace_ = "Heading774911002";
 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":"Heading3688798431__root"};
+export var classes = {"root":"Heading774911002__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,
+      ),
   };
 }