@wix/patterns 1.396.0 → 1.398.0

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

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

package/src/components/CustomColumnsPanel/CustomColumnsPanel.tsx

@@ -27,9 +27,10 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
   const schemaCtx = useSchemaContext();
   const isSchema = !!schemaCtx?.schema;
   const isEditable = !!collectionDataExtension || isSchema;
-  const fieldActions = useSidePanelFieldActions(
+  const { fieldActionsByColumn, fieldActionsModal } = useSidePanelFieldActions(
     isEditable ? state.columnsCollection.result.items : [],
     schemaCtx?.schema?.fieldActions,
+    schemaCtx?.schema?.refresh,
   );
 
   useEffect(() => state.init(), []);
@@ -58,67 +59,70 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
     : 'cairo.table.custom-columns.subtitle';
 
   return (
-    <PatternsSidePanel
-      dataHook="custom-columns-panel"
-      width="100%"
-      onClose={() => state.onClose()}
-    >
-      <SidePanel.Header title={t(titleKey)} subtitle={t(subtitleKey)}>
-        {shouldShowSearch && (
-          <Box padding="0 SP3 SP2 SP3">
-            <CustomColumnsSearch state={state} />
-          </Box>
-        )}
-      </SidePanel.Header>
-      <ScrollableContent
-        overflowY
-        dataHook="custom-columns-panel-scroll-container"
-        ref={(e) => {
-          if (state.dragAndDrop) {
-            state.dragAndDrop.listRect.element = e;
-          }
-        }}
+    <>
+      <PatternsSidePanel
+        dataHook="custom-columns-panel"
+        width="100%"
+        onClose={() => state.onClose()}
       >
-        {hasSearchValue && !hasSearchResults ? (
-          <CustomColumnsNoResults state={state} />
-        ) : (
-          <>
-            {collectionDataExtension?.dataExtension?.shouldDisplayArchive &&
-              collectionDataExtension?.DataExtension
-                ?.CustomColumnsArchivedItemsCTAButton && (
-                <collectionDataExtension.DataExtension.CustomColumnsArchivedItemsCTAButton
-                  dataExtension={collectionDataExtension.dataExtension}
-                  onCloseSidePanel={() => state.onClose()}
-                  dataHook="custom-columns"
-                />
-              )}
-            <ColumnsList state={state} fieldActions={fieldActions} />
-          </>
+        <SidePanel.Header title={t(titleKey)} subtitle={t(subtitleKey)}>
+          {shouldShowSearch && (
+            <Box padding="0 SP3 SP2 SP3">
+              <CustomColumnsSearch state={state} />
+            </Box>
+          )}
+        </SidePanel.Header>
+        <ScrollableContent
+          overflowY
+          dataHook="custom-columns-panel-scroll-container"
+          ref={(e) => {
+            if (state.dragAndDrop) {
+              state.dragAndDrop.listRect.element = e;
+            }
+          }}
+        >
+          {hasSearchValue && !hasSearchResults ? (
+            <CustomColumnsNoResults state={state} />
+          ) : (
+            <>
+              {collectionDataExtension?.dataExtension?.shouldDisplayArchive &&
+                collectionDataExtension?.DataExtension
+                  ?.CustomColumnsArchivedItemsCTAButton && (
+                  <collectionDataExtension.DataExtension.CustomColumnsArchivedItemsCTAButton
+                    dataExtension={collectionDataExtension.dataExtension}
+                    onCloseSidePanel={() => state.onClose()}
+                    dataHook="custom-columns"
+                  />
+                )}
+              <ColumnsList state={state} fieldActions={fieldActionsByColumn} />
+            </>
+          )}
+        </ScrollableContent>
+        {collectionDataExtension?.DataExtension
+          ?.CustomColumnsAddCustomFieldCTAButton && (
+          <collectionDataExtension.DataExtension.CustomColumnsAddCustomFieldCTAButton />
         )}
-      </ScrollableContent>
-      {collectionDataExtension?.DataExtension
-        ?.CustomColumnsAddCustomFieldCTAButton && (
-        <collectionDataExtension.DataExtension.CustomColumnsAddCustomFieldCTAButton />
-      )}
-      {schemaCtx?.addField && (
-        <Box direction="vertical" width="100%">
-          <Divider direction="horizontal" />
-          <Box
-            padding="SP4"
-            width="100%"
-            boxSizing="border-box"
-            direction="vertical"
-          >
-            <AddItem
-              dataHook="custom-columns-schema-add-field"
-              onClick={schemaCtx.addField}
+        {schemaCtx?.addField && (
+          <Box direction="vertical" width="100%">
+            <Divider direction="horizontal" />
+            <Box
+              padding="SP4"
+              width="100%"
+              boxSizing="border-box"
+              direction="vertical"
             >
-              {t('cairo.customFields.addCustomField.CTA')}
-            </AddItem>
+              <AddItem
+                dataHook="custom-columns-schema-add-field"
+                onClick={schemaCtx.addField}
+              >
+                {t('cairo.customFields.addCustomField.CTA')}
+              </AddItem>
+            </Box>
           </Box>
-        </Box>
-      )}
-    </PatternsSidePanel>
+        )}
+      </PatternsSidePanel>
+      {fieldActionsModal}
+    </>
   );
 }
 

package/src/components/CustomColumnsPanel/SidePanelFieldActionsModal.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { MessageActionModal } from '../ActionModal';
+import type { FieldActionsState } from '../../state/FieldActionsState';
+
+interface Props {
+  state: FieldActionsState;
+}
+
+function _SidePanelFieldActionsModal({ state }: Props) {
+  const value = state.confirmModal.value;
+  if (!value) {
+    return null;
+  }
+  return (
+    <MessageActionModal
+      state={state.confirmModal}
+      {...value}
+      primaryButtonProps={{
+        ...value.primaryButtonProps,
+        disabled: state.deleteTask.status.isLoading,
+      }}
+    />
+  );
+}
+
+const SidePanelFieldActionsModal = observer(_SidePanelFieldActionsModal);
+
+export default SidePanelFieldActionsModal;

package/src/components/CustomColumnsPanel/SidePanelFieldActionsRow.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
+import { observer } from 'mobx-react-lite';
 import type { Column } from '../../model';
-import type { FieldActions } from '../../types/SchemaConfig';
 import {
   buildFieldActionGroups,
   HeaderActionsPopover,
   type FieldActionColumn,
   type FieldActionHandlers,
-  type FieldActionPermissions,
+  type FieldActionKey,
 } from '../FieldActions';
+import { FieldActionsState } from '../../state/FieldActionsState';
 
-const SIDE_PANEL_ACTION_GROUPS: Parameters<
-  typeof buildFieldActionGroups
->[0]['groups'] = [
+const SIDE_PANEL_ACTION_GROUPS: FieldActionKey[][] = [
   ['editField'],
   ['makePrimary', 'duplicateField', 'duplicateFieldWithContent'],
   ['delete'],
@@ -30,29 +29,42 @@ function toFieldActionColumn(col: Column): FieldActionColumn & { id: string } {
 
 export interface SidePanelFieldActionsRowProps {
   column: Column;
-  fieldActions?: FieldActions;
-  permissions?: FieldActionPermissions;
+  state: FieldActionsState;
 }
 
-export function SidePanelFieldActionsRow({
+function _SidePanelFieldActionsRow({
   column,
-  fieldActions,
-  permissions,
+  state,
 }: SidePanelFieldActionsRowProps) {
-  const handlers: FieldActionHandlers = {
-    editField: fieldActions?.editField
-      ? (id) => fieldActions.editField!(id, {})
-      : undefined,
-    makePrimary: fieldActions?.makePrimary,
-    duplicateField: fieldActions?.duplicateField,
-    duplicateFieldWithContent: fieldActions?.duplicateFieldWithContent,
-    delete: fieldActions?.deleteField,
-  };
+  const { handlers: fieldActions, permissions } = state;
+
+  const handlers: FieldActionHandlers = {};
+
+  if (fieldActions?.editField) {
+    handlers.editField = (id) => fieldActions.editField!(id, {});
+  }
+  if (fieldActions?.makePrimary) {
+    handlers.makePrimary = (id) => state.makePrimary(id);
+  }
+  if (fieldActions?.duplicateField) {
+    handlers.duplicateField = (id) => state.duplicate(id);
+  }
+  if (fieldActions?.duplicateFieldWithContent) {
+    handlers.duplicateFieldWithContent = (id) => state.duplicateWithContent(id);
+  }
+  if (fieldActions?.deleteField) {
+    handlers.delete = (id) => state.confirmDelete(id);
+  }
 
   const groups = buildFieldActionGroups({
     column: toFieldActionColumn(column),
     permissions,
     handlers,
+    loading: {
+      makePrimary: state.isMakingPrimary,
+      duplicateField: state.isDuplicating,
+      duplicateFieldWithContent: state.isDuplicatingWithContent,
+    },
     groups: SIDE_PANEL_ACTION_GROUPS,
   });
 
@@ -67,3 +79,5 @@ export function SidePanelFieldActionsRow({
     />
   );
 }
+
+export const SidePanelFieldActionsRow = observer(_SidePanelFieldActionsRow);

package/src/components/CustomColumnsPanel/useSidePanelFieldActions.tsx

@@ -1,7 +1,16 @@
-import React, { Suspense, lazy, useMemo, type ReactNode } from 'react';
+import React, {
+  Suspense,
+  lazy,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 import type { Column } from '../../model';
 import type { FieldActions } from '../../types/SchemaConfig';
 import type { FieldActionPermissions } from '../FieldActions';
+import { FieldActionsState } from '../../state/FieldActionsState';
 
 const SidePanelFieldActionsRow = lazy(() =>
   import(
@@ -11,26 +20,68 @@ const SidePanelFieldActionsRow = lazy(() =>
   })),
 );
 
+const SidePanelFieldActionsModal = lazy(
+  () =>
+    import(
+      /* webpackChunkName: "SidePanelFieldActions" */ './SidePanelFieldActionsModal'
+    ),
+);
+
+export interface UseSidePanelFieldActionsResult {
+  fieldActionsByColumn: Record<string, ReactNode>;
+  fieldActionsModal: ReactNode;
+}
+
 export function useSidePanelFieldActions(
   columns: Column[],
   fieldActions?: FieldActions,
+  refresh?: () => Promise<void>,
   permissions?: FieldActionPermissions,
-): Record<string, ReactNode> {
-  return useMemo(() => {
+): UseSidePanelFieldActionsResult {
+  const { translate, showToast } = useWixPatternsContainer();
+
+  const [fieldActionsState] = useState(
+    () =>
+      new FieldActionsState(
+        translate,
+        fieldActions,
+        permissions,
+        showToast,
+        refresh,
+      ),
+  );
+
+  useEffect(() => {
+    fieldActionsState.setHandlers(fieldActions);
+  }, [fieldActionsState, fieldActions]);
+
+  useEffect(() => {
+    fieldActionsState.setPermissions(permissions);
+  }, [fieldActionsState, permissions]);
+
+  useEffect(() => {
+    fieldActionsState.setRefresh(refresh);
+  }, [fieldActionsState, refresh]);
+
+  const fieldActionsByColumn = useMemo(() => {
     const result: Record<string, ReactNode> = {};
 
     for (const col of columns) {
       result[col.id] = (
         <Suspense fallback={null}>
-          <SidePanelFieldActionsRow
-            column={col}
-            fieldActions={fieldActions}
-            permissions={permissions}
-          />
+          <SidePanelFieldActionsRow column={col} state={fieldActionsState} />
         </Suspense>
       );
     }
 
     return result;
-  }, [columns, fieldActions, permissions]);
+  }, [columns, fieldActionsState]);
+
+  const fieldActionsModal = (
+    <Suspense fallback={null}>
+      <SidePanelFieldActionsModal state={fieldActionsState} />
+    </Suspense>
+  );
+
+  return { fieldActionsByColumn, fieldActionsModal };
 }

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

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

package/src/components/EditableTable/EditableCell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell466228143";
+var _namespace_ = "EditableCell2410741874";
 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":"EditableCell466228143__root","validationIndicator":"EditableCell466228143__validationIndicator"};
+export var classes = {"root":"EditableCell2410741874__root","validationIndicator":"EditableCell2410741874__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/HeaderActionsPopover.st.css.ts

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

package/src/components/EditableTable/cellTypes/CellViewLayout.st.css.ts

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

package/src/components/EditableTable/cellTypes/boolean/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1809996821";
+var _namespace_ = "Edit2926467071";
 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":"Edit1809996821__root","booleanEdit":"Edit1809996821__booleanEdit"};
+export var classes = {"root":"Edit2926467071__root","booleanEdit":"Edit2926467071__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/boolean/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2022728397";
+var _namespace_ = "View630518677";
 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":"View2022728397__root","booleanView":"View2022728397__booleanView"};
+export var classes = {"root":"View630518677__root","booleanView":"View630518677__booleanView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3311818881";
+var _namespace_ = "Edit1344500611";
 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":"Edit3311818881__root","dateInput":"Edit3311818881__dateInput"};
+export var classes = {"root":"Edit1344500611__root","dateInput":"Edit1344500611__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/View.st.css.ts

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

package/src/components/EditableTable/cellTypes/email/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2255670974";
+var _namespace_ = "Edit3075222500";
 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":"Edit2255670974__root","emailInput":"Edit2255670974__emailInput"};
+export var classes = {"root":"Edit3075222500__root","emailInput":"Edit3075222500__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/email/View.st.css.ts

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

package/src/components/EditableTable/cellTypes/number/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit737468891";
+var _namespace_ = "Edit3536348979";
 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":"Edit737468891__root","numberInput":"Edit737468891__numberInput"};
+export var classes = {"root":"Edit3536348979__root","numberInput":"Edit3536348979__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/number/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View903115463";
+var _namespace_ = "View2457313708";
 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":"View903115463__root","textView":"View903115463__textView"};
+export var classes = {"root":"View2457313708__root","textView":"View2457313708__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1296664024";
+var _namespace_ = "Edit2465111391";
 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":"Edit1296664024__root","jsonInput":"Edit1296664024__jsonInput"};
+export var classes = {"root":"Edit2465111391__root","jsonInput":"Edit2465111391__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/View.st.css.ts

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