@wix/patterns 1.358.0 → 1.360.0

package/src/components/CollectionViewsDropdown/ViewsDropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   Box,
@@ -11,7 +11,10 @@ import { FiltersMap } from '@wix/bex-core';
 import { ViewsDropdownModals } from './ViewsDropdownModals';
 import { View } from '../../model';
 import { classes, st } from './ViewsDropdown.st.css.js';
-import { ManageViewPopover } from './ManageViewPopover';
+import {
+  ManageViewPopover,
+  ManageViewPopoverHandle,
+} from './ManageViewPopover';
 import {
   buildCategoryOption,
   buildViewOption,
@@ -19,9 +22,12 @@ import {
   getViewName,
 } from './viewsDropdownRenderHelpers';
 import { AutoCompleteReadonly } from './AutoCompleteReadonly';
+import { SaveToNewViewFooter } from './SaveToNewViewFooter';
 import { ViewsDropdownPrefix } from './ViewsDropdownPrefix';
 import { useWixPatternsContainer } from '../..';
 
+export const VIEWS_REDESIGN_EXPERIMENT = 'specs.cairo.ViewsRedesign';
+
 export type ViewsDropdownProps<T, F extends FiltersMap> = {
   state: CollectionViewsState<T, F>;
   onSelect?: (view: View<F>) => void;
@@ -38,6 +44,9 @@ function _ViewsDropdown<T, F extends FiltersMap>({
   ...dropdownProps
 }: ViewsDropdownProps<T, F>) {
   const container = useWixPatternsContainer();
+  const isRedesign = container.internalExperiments?.enabled(
+    VIEWS_REDESIGN_EXPERIMENT,
+  );
   const { views: viewsState } = state;
   const { currentView, collection, localSearchState } = viewsState;
   const { filteredCategoriesWithViews } = localSearchState;
@@ -45,22 +54,51 @@ function _ViewsDropdown<T, F extends FiltersMap>({
   const showLoader =
     collection.result.status.isIdle || collection.result.status.isLoading;
 
+  const manageViewRef = useRef<ManageViewPopoverHandle>(null);
   const viewsOptions = useMemo(() => {
     const { viewsWithoutCategory, categories } = filteredCategoriesWithViews;
 
+    const buildOption = (view: (typeof viewsWithoutCategory)[number]) => {
+      const isSelected = currentView?.id === view.id;
+      const option = buildViewOption({
+        view,
+        viewsState,
+        suffix:
+          isRedesign && isSelected ? (
+            <ManageViewPopover
+              ref={manageViewRef}
+              origin="MainToolbar"
+              state={state}
+              redesign
+            />
+          ) : undefined,
+      });
+
+      if (isRedesign && isSelected) {
+        return {
+          ...option,
+          onDrillIn: () => manageViewRef.current?.focusTrigger(),
+        };
+      }
+
+      return option;
+    };
+
     return [
-      ...viewsWithoutCategory.map((view) =>
-        buildViewOption({ view, viewsState }),
-      ),
+      ...viewsWithoutCategory.map(buildOption),
       ...categories.flatMap((category) => [
-        // Skip category header if category has no displayable name
         ...(getCategoryName({ category, viewsState })
           ? [buildCategoryOption({ category, viewsState })]
           : []),
-        ...category.views.map((view) => buildViewOption({ view, viewsState })),
+        ...category.views.map(buildOption),
       ]),
     ];
-  }, [filteredCategoriesWithViews, container.initTask.status]);
+  }, [
+    filteredCategoriesWithViews,
+    container.initTask.status,
+    currentView?.id,
+    isRedesign,
+  ]);
 
   const { options, fixedFooter } = showLoader
     ? {
@@ -79,7 +117,9 @@ function _ViewsDropdown<T, F extends FiltersMap>({
       }
     : {
         options: viewsOptions,
-        fixedFooter: undefined,
+        fixedFooter: isRedesign ? (
+          <SaveToNewViewFooter state={state} />
+        ) : undefined,
       };
 
   const {
@@ -104,7 +144,7 @@ function _ViewsDropdown<T, F extends FiltersMap>({
             localSearchState.setInputValueAndScheduleSearch(e.target.value)
           }
           clearInput={() => localSearchState.clearSearch()}
-          dropdownWidth={dropdownWidth}
+          dropdownWidth={isRedesign ? '264px' : dropdownWidth}
           popoverProps={{ placement: 'bottom-start' }}
           {...dropdownProps}
           onInputClicked={(e) => {
@@ -164,9 +204,11 @@ function _ViewsDropdown<T, F extends FiltersMap>({
         />
       </Box>
 
-      <Box verticalAlign="middle" paddingLeft="SP2">
-        <ManageViewPopover origin="MainToolbar" state={state} />
-      </Box>
+      {!isRedesign && (
+        <Box verticalAlign="middle" paddingLeft="SP2">
+          <ManageViewPopover origin="MainToolbar" state={state} />
+        </Box>
+      )}
 
       <ViewsDropdownModals state={state} />
     </Box>

package/src/components/CollectionViewsDropdown/ViewsDropdownPrefix.tsx

@@ -1,9 +1,15 @@
 import { Box, Input, Tooltip } from '@wix/design-system';
-import { FlagSmall, StatusAlertSmall } from '@wix/wix-ui-icons-common';
+import {
+  FlagSmall,
+  PinSmall,
+  StatusAlertSmall,
+} from '@wix/wix-ui-icons-common';
 import React from 'react';
 import { FiltersMap } from '@wix/bex-core';
 import { CollectionViewsState } from '../../state';
 import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '../..';
+import { VIEWS_REDESIGN_EXPERIMENT } from './ViewsDropdown';
 
 export type ViewsDropdownPrefixProps<T, F extends FiltersMap> = {
   state: CollectionViewsState<T, F>;
@@ -13,6 +19,10 @@ export function _ViewsDropdownPrefix<T, F extends FiltersMap>(
   props: ViewsDropdownPrefixProps<T, F>,
 ) {
   const { state } = props;
+  const container = useWixPatternsContainer();
+  const isRedesign = container.internalExperiments?.enabled(
+    VIEWS_REDESIGN_EXPERIMENT,
+  );
 
   const { views } = state;
   const {
@@ -44,10 +54,11 @@ export function _ViewsDropdownPrefix<T, F extends FiltersMap>(
   }
 
   if (views.isDefaultView) {
+    const DefaultIcon = isRedesign ? PinSmall : FlagSmall;
     return (
       <Input.Affix>
         <Box dataHook="view-default">
-          <FlagSmall />
+          <DefaultIcon />
         </Box>
       </Input.Affix>
     );

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/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/DragHandle/DragHandle.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle3887572879";
+var _namespace_ = "DragHandle2576753877";
 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":"DragHandle3887572879__root"};
+export var classes = {"root":"DragHandle2576753877__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_ = "EntityPagePlain673223306";
+var _namespace_ = "EntityPagePlain875261530";
 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":"EntityPagePlain673223306__root"};
+export var classes = {"root":"EntityPagePlain875261530__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_ = "Fade4075889701";
+var _namespace_ = "Fade3970104487";
 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":"Fade4075889701__root"};
+export var classes = {"root":"Fade3970104487__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_ = "Heading2155534684";
+var _namespace_ = "Heading3688798431";
 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":"Heading2155534684__root"};
+export var classes = {"root":"Heading3688798431__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);