@wix/patterns 1.357.0 → 1.359.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar269385832";
+var _namespace_ = "CollectionToolbar3133536778";
 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":"CollectionToolbar269385832__root","left":"CollectionToolbar269385832__left","right":"CollectionToolbar269385832__right","fullWidth":"CollectionToolbar269385832__fullWidth"};
+export var classes = {"root":"CollectionToolbar3133536778__root","left":"CollectionToolbar3133536778__left","right":"CollectionToolbar3133536778__right","fullWidth":"CollectionToolbar3133536778__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/CollectionToolbar.tsx

@@ -51,6 +51,7 @@ export interface CollectionToolbarProps<T, F extends FiltersMap> {
     F
   >['tableGridSwitchButton'];
   exportButton?: ToolbarCollectionBaseProps<T, F>['exportButton'];
+  importButton?: ToolbarCollectionBaseProps<T, F>['importButton'];
   primaryActionButton?: ToolbarCollectionBaseProps<T, F>['primaryActionButton'];
   dragAndDropReorderModeToolbar?: ToolbarCollectionBaseProps<
     T,
@@ -75,6 +76,7 @@ function _CollectionToolbar<T, F extends FiltersMap>(
     filters: filtersProp,
     tableGridSwitchButton,
     exportButton,
+    importButton,
     dragAndDropReorderModeToolbar,
     primaryActionButton,
     secondaryActions,
@@ -193,8 +195,14 @@ function _CollectionToolbar<T, F extends FiltersMap>(
     );
   }, [left, viewsToolbarItem, state.toolbarFiltersStateInitialized]);
 
+  const isLayoutToggleRedesignEnabled = state.container.experiments?.enabled(
+    'specs.cairo.layout-toggle.redesign',
+  );
+
   const shouldAddDivider =
-    tableGridSwitchButton && (searchElement || MoreFiltersButton);
+    !isLayoutToggleRedesignEnabled &&
+    tableGridSwitchButton &&
+    (searchElement || MoreFiltersButton);
 
   const analyticsCustomColumnsDiscoverability =
     state.container.experiments?.get(
@@ -249,6 +257,10 @@ function _CollectionToolbar<T, F extends FiltersMap>(
           ...[rendersStart ? undefined : classes.fullWidth],
         )}
       >
+        {isLayoutToggleRedesignEnabled && tableGridSwitchButton && (
+          <TableToolbar.Item>{tableGridSwitchButton}</TableToolbar.Item>
+        )}
+
         <CollectionToolbarActionsGroup
           state={state}
           viewsToolbarItem={viewsToolbarItem}
@@ -257,6 +269,7 @@ function _CollectionToolbar<T, F extends FiltersMap>(
           multiLevelSorting={multiLevelSorting}
           customColumns={isMobile || isPanelLayout ? undefined : customColumns}
           exportButton={exportButton}
+          importButton={importButton}
           search={searchElement}
           showCustomColumnsOnTheLeft={showCustomColumnsOnTheLeft}
           left={left}
@@ -280,7 +293,7 @@ function _CollectionToolbar<T, F extends FiltersMap>(
             />
           </Box>
         )}
-        {tableGridSwitchButton && (
+        {!isLayoutToggleRedesignEnabled && tableGridSwitchButton && (
           <TableToolbar.Item>{tableGridSwitchButton}</TableToolbar.Item>
         )}
       </TableToolbar.ItemGroup>

package/src/components/CollectionToolbar/CollectionToolbarActionsGroupProps.ts

@@ -11,6 +11,7 @@ export interface CollectionToolbarActionsGroupProps {
   customColumns?: ReactElement | null;
   multiLevelSorting?: ReactElement;
   exportButton?: ReactElement;
+  importButton?: ReactElement;
   search?: ToolbarBaseProps['search'];
   showCustomColumnsOnTheLeft?: boolean;
   hasTabs?: boolean;

package/src/components/CollectionToolbar/CollectionToolbarActionsGroupResponsiveLayout.tsx

@@ -20,6 +20,7 @@ export function CollectionToolbarActionsGroupResponsiveLayout(
     multiLevelSorting,
     customColumns,
     exportButton,
+    importButton,
     search,
     showCustomColumnsOnTheLeft,
   } = props;
@@ -65,6 +66,10 @@ export function CollectionToolbarActionsGroupResponsiveLayout(
           cloneElement(exportButton, {
             toolbarType: 'default',
           })}
+        {importButton &&
+          cloneElement(importButton, {
+            toolbarType: 'default',
+          })}
         {customColumns && !showCustomColumnsOnTheLeft && customColumns}
       </ToolbarGroupScrollWidthBox>
 

package/src/components/CollectionToolbar/CollectionToolbarActionsToolbarItemsGroup.tsx

@@ -20,6 +20,7 @@ function _CollectionToolbarActionsToolbarItemsGroup(
     multiLevelSorting,
     customColumns,
     exportButton,
+    importButton,
     search,
     showCustomColumnsOnTheLeft,
   } = props;
@@ -74,6 +75,13 @@ function _CollectionToolbarActionsToolbarItemsGroup(
               })}
             </TableToolbar.Item>
           )}
+          {importButton && (
+            <TableToolbar.Item>
+              {cloneElement(importButton, {
+                toolbarType: 'default',
+              })}
+            </TableToolbar.Item>
+          )}
           {customColumns && !showCustomColumnsOnTheLeft && (
             <TableToolbar.Item>{customColumns}</TableToolbar.Item>
           )}

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter2632176424";
+var _namespace_ = "SearchOrCustomFilter1002994317";
 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":"SearchOrCustomFilter2632176424__root","search":"SearchOrCustomFilter2632176424__search","searchMobile":"SearchOrCustomFilter2632176424__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter1002994317__root","search":"SearchOrCustomFilter1002994317__search","searchMobile":"SearchOrCustomFilter1002994317__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/useIsCollectionToolbarExists.tsx

@@ -18,6 +18,7 @@ export const useIsCollectionToolbarExists = <T, F extends FiltersMap>(
     filters,
     tableGridSwitchButton,
     exportButton,
+    importButton,
     primaryActionButton,
     secondaryActions,
     moreActions,
@@ -31,6 +32,7 @@ export const useIsCollectionToolbarExists = <T, F extends FiltersMap>(
     customColumns ||
     multiLevelSorting ||
     exportButton ||
+    importButton ||
     primaryActionButton ||
     secondaryActions ||
     moreActions ||

package/src/components/CollectionToolbars/CollectionToolbars.tsx

@@ -35,6 +35,7 @@ export interface CollectionToolbarsProps<T, F extends FiltersMap>
     | 'summaryBar'
     | 'tableGridSwitchButton'
     | 'exportButton'
+    | 'importButton'
     | 'primaryActionButton'
     | 'secondaryActions'
     | 'moreActions'

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly4060538635";
+var _namespace_ = "AutoCompleteReadonly777308366";
 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":"AutoCompleteReadonly4060538635__root"};
+export var classes = {"root":"AutoCompleteReadonly777308366__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_ = "ViewsDropdown65557832";
+var _namespace_ = "ViewsDropdown3368516299";
 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":"ViewsDropdown65557832__root"};
+export var classes = {"root":"ViewsDropdown3368516299__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomDrawerLayout.tsx

@@ -11,6 +11,7 @@ export interface CustomDrawerLayoutProps {
   primaryButtonProps?: Partial<Omit<ButtonProps, 'as'>>;
   primaryButtonOnClick?: () => void;
   secondaryButtonOnClick?: () => void;
+  removeContentPadding?: boolean;
 }
 
 export function CustomDrawerLayout(props: CustomDrawerLayoutProps) {
@@ -24,21 +25,21 @@ export function CustomDrawerLayout(props: CustomDrawerLayoutProps) {
     primaryButtonProps,
     primaryButtonOnClick,
     secondaryButtonOnClick,
+    removeContentPadding,
   } = props;
 
   return (
     <Box
       dataHook={dataHook}
       direction="vertical"
-      padding="SP3"
+      padding="SP3 0"
       backgroundColor="white"
       borderRadius="12px"
     >
       {title && (
         <Box
           direction="vertical"
-          paddingTop="SP1"
-          paddingBottom="SP1"
+          padding="SP1 SP3"
           marginBottom="SP4"
           align="center"
         >
@@ -48,11 +49,15 @@ export function CustomDrawerLayout(props: CustomDrawerLayoutProps) {
         </Box>
       )}
 
-      <Box flex={1} marginBottom="SP4">
+      <Box
+        flex={1}
+        marginBottom="SP4"
+        padding={removeContentPadding ? undefined : '0 SP3'}
+      >
         {children}
       </Box>
 
-      <Box direction="vertical" gap="SP4">
+      <Box direction="vertical" gap="SP4" padding="0 SP3">
         {primaryButtonText && (
           <Button
             dataHook="baseModalLayout-primary-button"

package/src/components/CustomFieldsTransforms/transformOperatorFilterToWQL.tsx

@@ -117,38 +117,13 @@ export const transformOperatorFilterToWQL = <T,>(
         },
       ];
 
-    case FilterOperator.LESS_THAN:
+    case FilterOperator.NOT_EXISTS:
       return [
         {
-          [filterName]: {
-            $lt: value,
-          },
-        },
-      ];
-
-    case FilterOperator.LESS_THAN_OR_EQUAL:
-      return [
-        {
-          [filterName]: {
-            $lte: value,
-          },
-        },
-      ];
-
-    case FilterOperator.GREATER_THAN:
-      return [
-        {
-          [filterName]: {
-            $gt: value,
-          },
-        },
-      ];
-
-    case FilterOperator.GREATER_THAN_OR_EQUAL:
-      return [
-        {
-          [filterName]: {
-            $gte: value,
+          $not: {
+            [filterName]: {
+              $exists: true,
+            },
           },
         },
       ];

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle3778857946";
+var _namespace_ = "DragHandle2342184303";
 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":"DragHandle3778857946__root"};
+export var classes = {"root":"DragHandle2342184303__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_ = "EntityPagePlain1610818731";
+var _namespace_ = "EntityPagePlain1608197167";
 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":"EntityPagePlain1610818731__root"};
+export var classes = {"root":"EntityPagePlain1608197167__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_ = "Fade3639909523";
+var _namespace_ = "Fade1887979394";
 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":"Fade3639909523__root"};
+export var classes = {"root":"Fade1887979394__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Grid/Grid.tsx

@@ -93,6 +93,7 @@ function _Grid<T, F extends FiltersMap = FiltersMap>(props: GridProps<T, F>) {
     cardProps,
     dataHook,
     exportModal,
+    importModal,
     sections,
   } = props;
 
@@ -145,6 +146,7 @@ function _Grid<T, F extends FiltersMap = FiltersMap>(props: GridProps<T, F>) {
         </GridPlaceholderStates>
       </ToolbarCollection>
       {exportModal ?? toolbar.featuredComponents.exportModal.value}
+      {importModal ?? toolbar.featuredComponents.importModal.value}
     </CollectionCard>
   );
 }

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

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

package/src/components/ImportButton/ImportButton.tsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from 'react';
+import { FiltersMap, ModalState } from '@wix/bex-core';
+import { Button, Drawer, Modal } from '@wix/design-system';
+import { DownloadImport } from '@wix/wix-ui-icons-common';
+import { observer, Observer } from 'mobx-react-lite';
+import { ImportButtonModalLayout } from './ImportButtonModalLayout';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
+import { ImportButtonProps } from './ImportProps';
+import { ResponsiveButton } from '../ResponsiveButton/ResponsiveButton';
+import { useIsMobile } from '../../hooks/useIsMobile';
+
+function _ImportButton<T, F extends FiltersMap>(props: ImportButtonProps) {
+  const {
+    toolbarType = 'default',
+    fields,
+    bulkUploadItems,
+    backup,
+    batchSize,
+  } = props;
+
+  const table = useToolbarCollectionContext<T, F>();
+  const {
+    toolbar: { responsive },
+  } = table;
+
+  const { translate: t } = useWixPatternsContainer();
+  const [state] = useState(() => (table.importState ??= new ModalState()));
+  const isMobile = useIsMobile();
+
+  useEffect(() => {
+    table.featuredComponents.importModal.set(
+      <Observer>
+        {() => {
+          const child = (
+            <ImportButtonModalLayout
+              importModalState={state}
+              fields={fields}
+              bulkUploadItems={bulkUploadItems}
+              backup={backup}
+              batchSize={batchSize}
+            />
+          );
+
+          if (isMobile) {
+            return (
+              <Drawer
+                dataHook="import-modal"
+                open={state.isOpen}
+                onClose={state.requestClose}
+              >
+                {child}
+              </Drawer>
+            );
+          }
+
+          return (
+            <Modal
+              onRequestClose={state.requestClose}
+              isOpen={state.isOpen}
+              dataHook="import-modal"
+            >
+              {child}
+            </Modal>
+          );
+        }}
+      </Observer>,
+    );
+
+    return () => {
+      table.featuredComponents.importModal.set(null);
+    };
+  }, []);
+
+  return (
+    <div data-hook="import-container">
+      {toolbarType === 'default' ? (
+        <ResponsiveButton
+          state={responsive.actions}
+          dataHook="import-button"
+          onClick={state.open}
+          icon={<DownloadImport />}
+        >
+          {t('cairo.import.import')}
+        </ResponsiveButton>
+      ) : (
+        <Button
+          skin="standard"
+          priority="secondary"
+          size="small"
+          ellipsis
+          prefixIcon={<DownloadImport />}
+          dataHook="import-button"
+          onClick={state.open}
+        >
+          {t('cairo.import.import')}
+        </Button>
+      )}
+    </div>
+  );
+}
+
+export const ImportButton = observer(_ImportButton);

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

@@ -0,0 +1,18 @@
+import { ButtonUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import ImportModalUniDriver from './ImportModal.uni.driver';
+
+export function ImportButtonUniDriver(base: UniDriver, body: UniDriver) {
+  const getButton = () => ButtonUniDriver(base, body);
+  const importModal = ImportModalUniDriver(base, body);
+
+  return {
+    ...importModal,
+    /** Clicks the button to open import modal */
+    click: () => getButton().click(),
+    /** Indicates whether import button exists in the table toolbar */
+    exists: () => getButton().exists(),
+  };
+}
+
+export default ImportButtonUniDriver;

package/src/components/ImportButton/ImportButtonModalLayout.tsx

@@ -0,0 +1,94 @@
+import { Box, CustomModalLayout } from '@wix/design-system';
+import { getImportModalStepProps } from './getImportModalStepProps';
+import React, { useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { useCreateImport } from '@wix/bex-core';
+import { ImportButtonModalLayoutProps } from './ImportProps';
+import { addEventListener } from '@wix/bex-core/util';
+import { useIsMobile } from '../../hooks/useIsMobile';
+import { CustomDrawerLayout } from '../CustomDrawerLayout';
+import { ImportStepper } from './ImportStepper';
+
+function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
+  const {
+    fields,
+    bulkUploadItems,
+    backup,
+    batchSize,
+    importModalState,
+    ...rest
+  } = props;
+
+  const isMobile = useIsMobile();
+
+  const createImport = useCreateImport({
+    fields,
+    bulkUploadItems,
+    backup,
+    batchSize,
+    importModalState,
+  });
+
+  const [state] = useState(() => createImport());
+
+  const {
+    onRequestClose,
+    children,
+    removeContentPadding,
+    ...customModalLayoutProps
+  } = getImportModalStepProps({
+    state,
+  });
+
+  const wrappedChildren =
+    state.currentStep !== 'progress' ? (
+      <Box direction="vertical" gap="SP3" width="100%">
+        <ImportStepper
+          state={state}
+          removeContentPadding={!removeContentPadding}
+        />
+        {children}
+      </Box>
+    ) : (
+      children
+    );
+
+  useEffect(() => {
+    if (onRequestClose) {
+      return addEventListener(
+        importModalState.events,
+        'requestClose',
+        onRequestClose,
+      );
+    }
+
+    return undefined;
+  }, [onRequestClose]);
+
+  useEffect(() => state.init(), []);
+
+  if (isMobile) {
+    return (
+      <CustomDrawerLayout
+        dataHook="import-modal-layout"
+        removeContentPadding={removeContentPadding}
+        {...rest}
+        {...customModalLayoutProps}
+        children={wrappedChildren}
+      />
+    );
+  }
+
+  return (
+    <CustomModalLayout
+      width="600px"
+      dataHook="import-modal-layout"
+      removeContentPadding={removeContentPadding}
+      {...rest}
+      {...customModalLayoutProps}
+      children={wrappedChildren}
+    />
+  );
+}
+
+export const ImportButtonModalLayout = observer(_ImportButtonModalLayout);

package/src/components/ImportButton/ImportModal.tsx

@@ -0,0 +1,46 @@
+import { Drawer, Modal } from '@wix/design-system';
+import React, { useState } from 'react';
+import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
+import { FiltersMap, ModalState } from '@wix/bex-core';
+import { ImportButtonModalLayout } from './ImportButtonModalLayout';
+import { observer } from 'mobx-react-lite';
+import { ImportModalProps } from './ImportProps';
+import { useIsMobile } from '../../hooks/useIsMobile';
+
+function _ImportModal<T, F extends FiltersMap>(props: ImportModalProps) {
+  const table = useToolbarCollectionContext<T, F>();
+
+  const [importModalState] = useState(
+    () => (table.importState ??= new ModalState()),
+  );
+
+  const isMobile = useIsMobile();
+
+  const child = (
+    <ImportButtonModalLayout {...props} importModalState={importModalState} />
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer
+        dataHook="import-modal"
+        open={importModalState.isOpen}
+        onClose={importModalState.close}
+      >
+        {child}
+      </Drawer>
+    );
+  }
+
+  return (
+    <Modal
+      onRequestClose={importModalState.close}
+      isOpen={importModalState.isOpen}
+      dataHook="import-modal"
+    >
+      {child}
+    </Modal>
+  );
+}
+
+export const ImportModal = observer(_ImportModal);