@wix/patterns 1.381.0 → 1.383.0

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

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

package/src/components/SchemaCard/SchemaCard.tsx

@@ -0,0 +1,80 @@
+import React, { ReactNode, useMemo } from 'react';
+import { Button, Card, CardProps } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer, usePageContext } from '@wix/bex-core/react';
+import { SidePanelsState } from '../../state/SidePanelsState';
+import { CustomColumnsEntityPageState } from '../../state/CustomColumnsEntityPageState';
+import { CustomColumnsEntityPageCTA } from '../CustomColumnsPanel/CustomColumnsEntityPageCTA';
+import { useSchemaContext } from '../../providers/SchemaContext';
+import { useSchemaCardContext } from '../../providers/SchemaCardContext';
+import { CustomColumnsDragAndDrop } from '../CustomColumns/CustomColumnsDragAndDrop';
+
+export interface SchemaCardProps extends Omit<CardProps, 'children'> {
+  title: string;
+  subtitle?: string;
+  collectionId: string;
+  children?: ReactNode;
+}
+
+function _SchemaCard({
+  title,
+  subtitle,
+  collectionId,
+  children,
+  ...rest
+}: SchemaCardProps) {
+  const container = useWixPatternsContainer();
+  const { translate: t } = container;
+  const schemaCardState = useSchemaCardContext();
+  const fieldsState = schemaCardState?.fieldsState;
+  const { modalsContainerRef } = usePageContext();
+  const schemaContext = useSchemaContext();
+  const schema = schemaContext?.schema;
+
+  const state = useMemo(() => {
+    if (!fieldsState || !schema) {
+      return null;
+    }
+    const panels = new SidePanelsState({
+      container,
+      panelGroupName: 'entity-page',
+    });
+    return new CustomColumnsEntityPageState({
+      container,
+      panels,
+      fieldsState,
+      schema,
+      showFieldTypeIcons: true,
+      dragAndDrop: CustomColumnsDragAndDrop,
+      modalsContainerRef,
+    });
+  }, [fieldsState, schema]);
+
+  return (
+    <Card {...rest}>
+      <Card.Header
+        title={title}
+        subtitle={subtitle}
+        suffix={
+          state ? (
+            <Button
+              size="small"
+              priority="secondary"
+              dataHook="schema-card-manage-fields-button"
+              onClick={() => state.panels.toggleSidePanel('customColumns')}
+            >
+              {t('cairo.table.manage-fields.button.cta')}
+            </Button>
+          ) : undefined
+        }
+      />
+      <Card.Divider />
+      <Card.Content>{children}</Card.Content>
+      {state && <CustomColumnsEntityPageCTA state={state} />}
+    </Card>
+  );
+}
+
+_SchemaCard.displayName = 'SchemaCard';
+
+export const SchemaCard = observer(_SchemaCard);

package/src/components/SchemaCard/index.ts

@@ -0,0 +1 @@
+export * from './SchemaCard';

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard3852981435";
+var _namespace_ = "SkeletonCard481946365";
 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":"SkeletonCard3852981435__root","headerLoading":"SkeletonCard3852981435__headerLoading"};
+export var classes = {"root":"SkeletonCard481946365__root","headerLoading":"SkeletonCard481946365__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter624551827";
+var _namespace_ = "TabsFilter1344429634";
 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":"TabsFilter624551827__root","title":"TabsFilter624551827__title"};
+export var classes = {"root":"TabsFilter1344429634__root","title":"TabsFilter1344429634__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal3372195957";
+var _namespace_ = "ManageTagsModal3904094043";
 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":"ManageTagsModal3372195957__root"};
+export var classes = {"root":"ManageTagsModal3904094043__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TagsFilter/TagsFilter.tsx

@@ -1,9 +1,12 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { FilterProps } from '../../model';
-import { useWixPatternsContainer, OffsetQuery } from '@wix/bex-core/react';
+import { useWixPatternsContainer, CursorQuery } from '@wix/bex-core/react';
 import { MultiSelectCheckboxFilter } from '../MultiSelectCheckboxFilter';
-import { Tag } from '@wix/bex-utils/@wix/ambassador-os-tags-v1-tag/types';
+import {
+  Tag,
+  TagExposure,
+} from '@wix/bex-utils/@wix/ambassador-os-tags-v1-tag/types';
 import { useFilterCollection } from '../../hooks/useFilterCollection';
 import { observer } from 'mobx-react-lite';
 
@@ -15,31 +18,42 @@ export const _TagsFilter = ({ filter }: TagsFilterProps) => {
   const { translate: t } = useWixPatternsContainer();
 
   const tagsFilterCollection = useFilterCollection(filter, {
+    paginationMode: 'cursor',
     queryName: [
       toolbarState.tagsCollectionState?.tagsManagementState.fqdnString,
       'tags',
       'filter',
     ].join('/'),
-    fetchData: async ({ search = '' }: OffsetQuery) => {
-      const filteredItems = (
-        toolbarState.tagsCollectionState?.tagsManagementState.items || []
-      ).filter((tag: Tag) =>
-        tag.name?.toLowerCase().includes(search.toLowerCase()),
+    fetchData: async ({ search = '', cursor, limit }: CursorQuery) => {
+      const tagsManagementState =
+        toolbarState.tagsCollectionState?.tagsManagementState;
+      if (!tagsManagementState) {
+        return { items: [], cursor: null, hasNext: false };
+      }
+
+      const result = await tagsManagementState.tagsService.queryTags(
+        {
+          fqdn: tagsManagementState.fqdnString,
+          exposure: TagExposure.PRIVATE,
+          query: {
+            cursorPaging: { limit, cursor: cursor ?? null },
+            ...(search ? { filter: { name: { $contains: search } } } : {}),
+          },
+        },
+        {},
+        {
+          serverErrorOverride: () => ({
+            message: t(
+              'cairo.tags.collectionPage.popover.loadTags.error.body',
+            ),
+          }),
+        },
       );
 
-      return {
-        items: filteredItems,
-        total: filteredItems.length,
-      };
+      return { items: result.items, cursor: result.cursor, hasNext: result.hasNext };
     },
   });
 
-  useEffect(() => {
-    if (toolbarState.tagsCollectionState?.tagsManagementState.items) {
-      tagsFilterCollection.refreshAllPages();
-    }
-  }, [toolbarState.tagsCollectionState?.tagsManagementState.items]);
-
   if (!toolbarState.tagsCollectionState) {
     return null;
   }

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common1666112165";
+var _namespace_ = "common773516301";
 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":"common1666112165__root","column":"common1666112165__column","fullHeight":"common1666112165__fullHeight"};
+export var classes = {"root":"common773516301__root","column":"common773516301__column","fullHeight":"common773516301__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/hooks/useEditableTableCollection.ts

@@ -14,6 +14,7 @@ import {
   EditableTablePermissions,
   EditableTableMutationHandlers,
 } from '../state/EditableTable';
+import type { FieldActions } from '../types/SchemaConfig';
 import { useOptionalCachedState } from './useOptionalCachedState';
 
 export type EditableTableCollectionConfig<
@@ -22,6 +23,7 @@ export type EditableTableCollectionConfig<
 > = CollectionConfigWithConditionals<T, F> & {
   permissions?: EditableTablePermissions;
   mutations: EditableTableMutationHandlers<T>;
+  fieldActions?: FieldActions;
   optimisticActionParams?: Partial<CollectionOptimisticActionsBaseParams<T, F>>;
 };
 
@@ -45,6 +47,7 @@ export const useEditableTableCollection: EditableTableCollection = <
       container,
       permissions: config.permissions,
       mutations: config.mutations,
+      fieldActions: config.fieldActions,
       createOptimisticActions: (collection) =>
         createOptimisticActions(collection, config.optimisticActionParams),
     });

package/src/hooks/useEntityPage.ts

@@ -1,11 +1,10 @@
 import { useState } from 'react';
 import { EntityPageState, EntityPageStateParams } from '../state';
-import { EntityViewConfig } from '../state/EntityPage/EntityPageFieldsState';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { FieldValues } from 'react-hook-form';
 import { useWixPatternsRouter } from '../providers/WixPatternsRouterProvider';
 
-type UseEntityPageParamsBase<T, V extends FieldValues = FieldValues> = Pick<
+export type UseEntityPageParams<T, V extends FieldValues = FieldValues> = Pick<
   EntityPageStateParams<T, V>,
   | 'fetch'
   | 'onSave'
@@ -16,15 +15,6 @@ type UseEntityPageParamsBase<T, V extends FieldValues = FieldValues> = Pick<
   | 'parentPath'
 >;
 
-export type UseEntityPageParams<
-  T,
-  V extends FieldValues = FieldValues,
-> = UseEntityPageParamsBase<T, V> &
-  (
-    | { fields: EntityViewConfig[]; persistencyKey: string }
-    | { fields?: never; persistencyKey?: never }
-  );
-
 export function useEntityPage<T, V extends FieldValues = FieldValues>(
   props: UseEntityPageParams<T, V>,
 ): EntityPageState<T, V> {

package/src/index.ts

@@ -91,6 +91,7 @@ export * from './components/FiltersPanel/AddApplyFiltersButton';
 export * from './components/EmptyState/CollectionEmptyState';
 export * from './components/EmptyState/CollectionNoResultsState';
 export * from './components/EmptyState/CollectionPremiumEmptyState';
+export * from './components/SchemaCard';
 export * from './components/SkeletonCard';
 export * from './components/CollectionErrorState';
 export * from './components/PageErrorState';
@@ -147,7 +148,7 @@ export * from './hooks/useIsMobile';
 
 export * from './state/ViewsState';
 export * from './state/EntityPage/EntityPageState';
-export type { EntityViewConfig } from './state/EntityPage/EntityPageFieldsState';
+export * from './state/SchemaCard';
 export * from './state/SettingsPage/SettingsPageState';
 export * from './state/TableState';
 export { GridState } from './state/GridState';

package/src/providers/SchemaCardContext.ts

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+import type { SchemaCardState } from '../state/SchemaCard/SchemaCardState';
+
+const context = createContext<SchemaCardState | null>(null);
+
+export const schemaCardContext = context;
+export const SchemaCardProvider = context.Provider;
+export const SchemaCardConsumer = context.Consumer;
+
+export const useSchemaCardContext = () => useContext(schemaCardContext);

package/src/providers/SchemaContext.tsx

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+import { FieldActions, SchemaConfig } from '../types/SchemaConfig';
+
+export type { FieldActions, SchemaConfig };
+
+export type SchemaContextValue = {
+  schema: SchemaConfig;
+};
+
+export const SchemaContext = createContext<SchemaContextValue | null>(null);
+
+export const useSchemaContext = () => useContext(SchemaContext);

package/src/providers/index.ts

@@ -11,4 +11,5 @@ export * from './SettingsPageContext';
 export * from './ScrollableContentContext';
 export * from './DropdownTranslationProvider';
 export * from './FilterTranslationProvider';
-export * from './SchemaProvider';
+export * from './SchemaContext';
+export * from './SchemaCardContext';

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

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

package/src/state/CustomColumnsDragAndDropState.ts

@@ -1,4 +1,3 @@
-import { CustomColumnsState } from './CustomColumnsState';
 import { CollectionOptimisticActions, FiltersMap } from '@wix/bex-core';
 import { arrayMove } from '@wix/wix-style-react-incubator/dnd-kit/sortable';
 import { addEventListener } from '@wix/bex-core/util';
@@ -8,9 +7,19 @@ import { Column } from '../model';
 import { action, computed, makeObservable } from 'mobx';
 import { RectState } from './RectState';
 import { indexOfCompareFn } from './indexOfCompareFn';
+import { CustomColumnsPanelStateBase } from './CustomColumnsPanelStateBase';
+
+export interface DragAndDropColumnsDataSource {
+  readonly columns: Column[];
+  readonly selectedColumns: {
+    readonly value: { id: string; isSelected?: boolean }[];
+    refresh(value: { id: string; isSelected?: boolean }[]): void;
+  };
+}
 
 export interface CustomColumnsDragAndDropStateParams<T, F extends FiltersMap> {
-  readonly customColumns: CustomColumnsState<T, F>;
+  readonly customColumns: CustomColumnsPanelStateBase<T, F>;
+  readonly dataSource: DragAndDropColumnsDataSource;
   readonly components: typeof CustomColumnsDragAndDrop;
   readonly modalsContainerRef: {
     current: HTMLElement | null | undefined;
@@ -20,7 +29,7 @@ export interface CustomColumnsDragAndDropStateParams<T, F extends FiltersMap> {
 export class CustomColumnsDragAndDropState<T, F extends FiltersMap> {
   readonly container;
   readonly customColumns;
-  readonly table;
+  readonly dataSource;
   readonly columnsActions;
   readonly components;
 
@@ -40,14 +49,14 @@ export class CustomColumnsDragAndDropState<T, F extends FiltersMap> {
   readonly listRect;
 
   constructor(params: CustomColumnsDragAndDropStateParams<T, F>) {
-    const { customColumns, components } = params;
+    const { customColumns, dataSource, components } = params;
     this.components = components;
     this.container = customColumns.container;
     this.listRect = new RectState({
       container: customColumns.container,
     });
     this.customColumns = customColumns;
-    this.table = customColumns.table;
+    this.dataSource = dataSource;
     this.columnsActions = new CollectionOptimisticActions({
       container: this.container,
       collection: this.customColumns.columnsCollection,
@@ -68,7 +77,7 @@ export class CustomColumnsDragAndDropState<T, F extends FiltersMap> {
   }
 
   get orderedColumnsByReorderDisabled() {
-    return this.table.columns.reduce(
+    return this.dataSource.columns.reduce(
       (state, column) => {
         column.reorderDisabled
           ? state.reorderDisabled.push(column)
@@ -81,10 +90,10 @@ export class CustomColumnsDragAndDropState<T, F extends FiltersMap> {
   }
 
   get orderedColumns(): Column[] {
-    const { table } = this;
+    const { dataSource } = this;
     const {
       selectedColumns: { value: selectedColumns },
-    } = table;
+    } = dataSource;
 
     const { reorderDisabled, regular } = this.orderedColumnsByReorderDisabled;
 
@@ -112,7 +121,7 @@ export class CustomColumnsDragAndDropState<T, F extends FiltersMap> {
 
   _onCustomColumnsReorder(columnId: string, overColumnId: string) {
     const {
-      table: { selectedColumns },
+      dataSource: { selectedColumns },
     } = this;
 
     const columnsArray = selectedColumns.value;