@wix/patterns 1.470.0 → 1.472.0

package/dist/types/utils/resolveFieldPresentation.d.ts

@@ -0,0 +1,3 @@
+import type { Field, FieldPresentation, FieldsSource } from '@wix/bex-core';
+export declare function resolveFieldPresentation(source: Pick<FieldsSource, 'fieldTypes' | 'getFieldPresentation'>, field: Field): FieldPresentation | undefined;
+//# sourceMappingURL=resolveFieldPresentation.d.ts.map

package/dist/types/utils/resolveFieldPresentation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveFieldPresentation.d.ts","sourceRoot":"","sources":["../../../src/utils/resolveFieldPresentation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAG5E,wBAAgB,wBAAwB,CACtC,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,YAAY,GAAG,sBAAsB,CAAC,EACjE,KAAK,EAAE,KAAK,GACX,iBAAiB,GAAG,SAAS,CAY/B"}

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "patterns@1.470.0";
+export declare const version = "patterns@1.472.0";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.470.0",
+  "version": "1.472.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -225,11 +225,11 @@
   ],
   "dependencies": {
     "@wix/agent-platform-bm-sdk": "^1.0.0",
-    "@wix/bex-core": "2.376.0",
-    "@wix/bex-utils": "2.163.0",
+    "@wix/bex-core": "2.378.0",
+    "@wix/bex-utils": "2.165.0",
     "@wix/essentials": "^0.1.26",
-    "@wix/patterns-fields": "1.98.0",
-    "@wix/patterns-fields-utils": "1.79.0",
+    "@wix/patterns-fields": "1.100.0",
+    "@wix/patterns-fields-utils": "1.81.0",
     "@wix/sdk": "^1.15.22",
     "@wix/wix-style-react-incubator": "^3.23.1",
     "@wix/wix-ui-test-utils": "^1.1.9",
@@ -292,7 +292,7 @@
     "@wix/awaiter-utils": "^1.0.76",
     "@wix/babel-cli": "^1.11.0",
     "@wix/business-manager-api": "^1.470.0",
-    "@wix/cairo-integration-utils": "1.138.0",
+    "@wix/cairo-integration-utils": "1.140.0",
     "@wix/ci-build-info": "^1.0.0",
     "@wix/crm": "^1.0.93",
     "@wix/dashboard": "^1.3.39",
@@ -453,5 +453,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "97d1c29a8ad3e7b7a230f871fad2c57e02a66ad278ba482093a17277"
+  "falconPackageHash": "0c34be998e6b644974daff0676a5a54fe275c247103ca96e24b17960"
 }

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

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

package/src/components/CmsFieldManagement/CmsFieldForm.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldForm125807038";
+var _namespace_ = "CmsFieldForm348933940";
 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":"CmsFieldForm125807038__root","fullBleedDivider":"CmsFieldForm125807038__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm348933940__root","fullBleedDivider":"CmsFieldForm348933940__fullBleedDivider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/CmsFieldModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldModal2237646965";
+var _namespace_ = "CmsFieldModal3745429405";
 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":"CmsFieldModal2237646965__root","modal":"CmsFieldModal2237646965__modal"};
+export var classes = {"root":"CmsFieldModal3745429405__root","modal":"CmsFieldModal3745429405__modal"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "ValidationAndDefaultsSection884685904";
+var _namespace_ = "ValidationAndDefaultsSection240207603";
 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":"ValidationAndDefaultsSection884685904__root","accordionWrapper":"ValidationAndDefaultsSection884685904__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection240207603__root","accordionWrapper":"ValidationAndDefaultsSection240207603__accordionWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse1973566489";
+var _namespace_ = "Collapse2687796507";
 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":"Collapse1973566489__root","exit":"Collapse1973566489__exit"};
+export var classes = {"root":"Collapse2687796507__root","exit":"Collapse2687796507__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionPageHeaderNew/CollectionPageHeader.tsx

@@ -20,6 +20,8 @@ export type CollectionPageHeaderBadge = Pick<
   'skin' | 'prefixIcon' | 'suffixIcon'
 > & {
   text: string;
+  /** Additional information shown on hover or keyboard focus. */
+  tooltip?: string;
 };
 
 export interface CollectionPageHeaderProps {
@@ -33,7 +35,7 @@ export interface CollectionPageHeaderProps {
   /**
    * `text`: The title text. \
    * `hideTotal`: Determines whether to hide the number of total entities on the title of the page. \
-   * `badges`: Badges rendered at the end of the title row, after the total. Their size is always `small`. \
+   * `badges`: Badges rendered at the end of the title row, after the total. Their size is always `small`. Each badge accepts `text`, `skin`, `prefixIcon`, `suffixIcon`, and an optional `tooltip` shown on hover or keyboard focus. \
    * The minimized header shows the title text on its own, so badges are not rendered while it is collapsed.
    * @external
    */

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader2791018871";
+var _namespace_ = "CollectionSectionHeader1691118132";
 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":"CollectionSectionHeader2791018871__root","summaryIcon":"CollectionSectionHeader2791018871__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader1691118132__root","summaryIcon":"CollectionSectionHeader1691118132__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/CollectionTable/CollectionTableWSRTable.st.css.ts

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

package/src/components/CollectionTable/CollectionTableWSRTable.tsx

@@ -154,6 +154,11 @@ function _CollectionTableWSRTable<U, T, F extends FiltersMap = FiltersMap>(
   const { isPanelLayout } = useWixPatternsContainer();
 
   const { bulk, initTask } = toolbar;
+  const SourceCustomColumns =
+    toolbar.collectionFieldsSource?.components.CustomColumns;
+  const effectiveCustomColumns =
+    customColumnsProp ??
+    (SourceCustomColumns ? <SourceCustomColumns /> : undefined);
 
   const keyedItems = props.keyedItems ?? stateKeyedItems;
   const { collection } = table;
@@ -277,7 +282,7 @@ function _CollectionTableWSRTable<U, T, F extends FiltersMap = FiltersMap>(
           sticky={sticky}
           state={toolbar}
           search={search}
-          customColumns={customColumnsProp}
+          customColumns={effectiveCustomColumns}
           multiLevelSorting={multiLevelSortingProp}
           views={views}
           title={title}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar3325156198";
+var _namespace_ = "CollectionToolbar2792970135";
 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":"CollectionToolbar3325156198__root","right":"CollectionToolbar3325156198__right","left":"CollectionToolbar3325156198__left","fullWidth":"CollectionToolbar3325156198__fullWidth"};
+export var classes = {"root":"CollectionToolbar2792970135__root","right":"CollectionToolbar2792970135__right","left":"CollectionToolbar2792970135__left","fullWidth":"CollectionToolbar2792970135__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/CollectionToolbar.tsx

@@ -105,12 +105,6 @@ function _CollectionToolbar<T, F extends FiltersMap>(
     container: { isPanelLayout },
   } = state;
 
-  const SourceCustomColumns =
-    state.collectionFieldsSource?.components.CustomColumns;
-  const effectiveCustomColumns =
-    customColumns ??
-    (SourceCustomColumns ? <SourceCustomColumns /> : undefined);
-
   const addDataHookToMoreActions = () => {
     return (
       <MoreActions dataHook="toolbar-more-actions" {...moreActions!.props} />
@@ -274,7 +268,7 @@ function _CollectionToolbar<T, F extends FiltersMap>(
           MoreFiltersButton={MoreFiltersButton}
           multiLevelSorting={multiLevelSorting}
           customColumns={
-            isMobile || isPanelLayout ? undefined : effectiveCustomColumns
+            isMobile || isPanelLayout ? undefined : customColumns
           }
           exportButton={exportButton}
           importButton={importButton}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter4147350481";
+var _namespace_ = "SearchOrCustomFilter469727312";
 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":"SearchOrCustomFilter4147350481__root","search":"SearchOrCustomFilter4147350481__search","searchMobile":"SearchOrCustomFilter4147350481__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter469727312__root","search":"SearchOrCustomFilter469727312__search","searchMobile":"SearchOrCustomFilter469727312__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly821413600";
+var _namespace_ = "AutoCompleteReadonly2428929088";
 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":"AutoCompleteReadonly821413600__root"};
+export var classes = {"root":"AutoCompleteReadonly2428929088__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_ = "ViewsDropdown600333655";
+var _namespace_ = "ViewsDropdown370660361";
 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":"ViewsDropdown600333655__root"};
+export var classes = {"root":"ViewsDropdown370660361__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomFieldFilters/CheckboxCustomFieldFilter.tsx

@@ -4,7 +4,8 @@ import { RadioGroupFilter } from '../RadioGroupFilter';
 import { CHECKBOX_FILTER_OPTION_ID } from './checkboxFilterOptions';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 
-interface CheckboxCustomFieldFilterProps extends FilterProps<unknown[]> {}
+export interface CheckboxCustomFieldFilterProps
+  extends FilterProps<unknown[]> {}
 
 export const CheckboxCustomFieldFilter = (
   props: CheckboxCustomFieldFilterProps,

package/src/components/CustomFieldFilters/HasValueCustomFieldFilter.tsx

@@ -10,13 +10,13 @@ export const HAS_VALUE_OPTION_IDS = {
   noValue: 'noValue',
 } as const;
 
-interface HasValueOption {
+export interface HasValueFilterOption {
   id: string;
   name: string;
 }
 
-interface HasValueCustomFieldFilterProps
-  extends FilterProps<HasValueOption[]> {}
+export interface HasValueCustomFieldFilterProps
+  extends FilterProps<HasValueFilterOption[]> {}
 
 /**
  * Filters a field on whether it holds anything, for types with no value to

package/src/components/CustomFieldModal/CustomFieldCollectionInput.tsx

@@ -4,6 +4,8 @@ import {
   AutoComplete,
   Box,
   Cell,
+  Divider,
+  ListItemAction,
   FormField,
   listItemSelectBuilder,
 } from '@wix/design-system';
@@ -21,9 +23,20 @@ export const _CustomFieldCollectionInput = ({
       $: { referencedCollectionId },
     },
   } = state;
+  const inputRef = React.useRef<AutoComplete>(null);
   const [search, setSearch] = React.useState<string | null>(null);
   const query = search?.trim().toLowerCase() ?? '';
   const loader = state.collectionOptionsLoader;
+  const dropdownAction = state.collectionInput?.dropdownAction;
+  const ActionIcon = dropdownAction?.icon;
+  const actionPending = state.isCollectionActionPending;
+  const handleAction = async () => {
+    inputRef.current?.hideOptions();
+    setSearch(null);
+    if (await state.runCollectionAction()) {
+      inputRef.current?.focus();
+    }
+  };
 
   useEffect(() => {
     void state.loadCollectionOptions();
@@ -52,8 +65,9 @@ export const _CustomFieldCollectionInput = ({
         statusMessage={referencedCollectionId.error}
       >
         <AutoComplete
+          ref={inputRef}
           dataHook="custom-field-modal-reference-collection"
-          disabled={state.mode === 'edit'}
+          disabled={state.mode === 'edit' || actionPending}
           value={
             search ??
             selectedOption?.label ??
@@ -82,6 +96,26 @@ export const _CustomFieldCollectionInput = ({
               label: option.label,
             }),
           )}
+          fixedFooter={
+            dropdownAction && (
+              <Box direction="vertical">
+                <Divider />
+                <ListItemAction
+                  dataHook="custom-field-modal-collection-action"
+                  title={dropdownAction.label}
+                  prefixIcon={ActionIcon && <ActionIcon />}
+                  size="small"
+                  skin="primary"
+                  disabled={
+                    dropdownAction.disabled ||
+                    actionPending ||
+                    state.isSubmitting
+                  }
+                  onClick={handleAction}
+                />
+              </Box>
+            )
+          }
           popoverProps={{ appendTo: 'window', zIndex: 5001 }}
         />
         {state.collectionOptionsLoading && (

package/src/components/CustomFieldModal/CustomFieldModal.tsx

@@ -72,7 +72,10 @@ export const _CustomFieldModal = ({
       secondaryButtonOnClick={() =>
         reportModalEndProcess({ endType: 'Cancel' })
       }
-      primaryButtonProps={isBmHarmonyTheme ? { skin: 'dark' } : undefined}
+      primaryButtonProps={{
+        ...(isBmHarmonyTheme && { skin: 'dark' }),
+        disabled: state.isCollectionActionPending,
+      }}
       secondaryButtonProps={isBmHarmonyTheme ? { skin: 'dark' } : undefined}
       showFooterDivider={!isBmHarmonyTheme}
     />

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

@@ -2,6 +2,7 @@ import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import type { ButtonSkin } from '@wix/design-system';
 import {
   AccordionUniDriver,
+  ListItemActionUniDriver,
   MessageModalLayoutUniDriver,
   DropdownUniDriver,
   FormFieldUniDriver,
@@ -166,6 +167,11 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
     getFormNameDriver,
     getFormKeyDriver,
     getFormReferenceCollectionDriver,
+    getCollectionAction: () =>
+      ListItemActionUniDriver(
+        body.$('[data-hook="custom-field-modal-collection-action"]'),
+        body,
+      ),
     getFormReadApps,
     getFormWriteApps,
     getFormReadUsers,

package/src/components/CustomFieldModal/CustomFieldTypeDropdown.tsx

@@ -40,9 +40,7 @@ export const _CustomFieldTypeDropdown = (
   const [search, setSearch] = React.useState<string | null>(null);
   const query = search?.trim().toLowerCase() ?? '';
 
-  const selectedType = fieldModal.types.find(
-    (option) => option.id === type.value,
-  );
+  const selectedType = props.state.selectedFieldTypeDisplay;
 
   const fieldTypeOptions = React.useMemo(() => {
     const toOption = (option: (typeof fieldModal.types)[number]) =>

package/src/components/CustomFieldsPanel/DeleteFieldModal.tsx

@@ -1,4 +1,4 @@
-import { Text } from '@wix/design-system';
+import { Box, Checkbox, Text } from '@wix/design-system';
 import React from 'react';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { MessageActionModal } from '../ActionModal';
@@ -14,28 +14,49 @@ export const _DeleteFieldModal = ({
   const container = useWixPatternsContainer();
   const { translate: t } = container;
   const { modal } = state;
+  const confirmation = modal.value?.confirmation;
 
   return (
     <MessageActionModal
       dataHook="archived-items-delete-confirm-modal"
       state={modal}
       skin="destructive"
-      title={t('cairo.customFields.delete.modal.title', {
-        selectedField: modal.value?.fieldName || '',
-      })}
+      title={
+        confirmation?.title ??
+        t('cairo.customFields.delete.modal.title', {
+          selectedField: modal.value?.fieldName || '',
+        })
+      }
       content={
-        <Text>
-          <Trans
-            i18nKey="cairo.customFields.delete.modal.description"
-            values={{
-              selectedField: modal.value?.fieldName || '',
-            }}
-            components={{
-              bold: <Text weight="bold" />,
-            }}
-          />
-        </Text>
+        <Box direction="vertical" gap="SP4">
+          {confirmation ? (
+            <Text>{confirmation.description}</Text>
+          ) : (
+            <Text>
+              <Trans
+                i18nKey="cairo.customFields.delete.modal.description"
+                values={{
+                  selectedField: modal.value?.fieldName || '',
+                }}
+                components={{
+                  bold: <Text weight="bold" />,
+                }}
+              />
+            </Text>
+          )}
+          {confirmation?.confirmationCheckboxLabel && (
+            <Checkbox
+              dataHook="delete-field-confirmation-checkbox"
+              checked={state.acknowledged}
+              disabled={modal.modal.confirming.isLoading}
+              onChange={(event) => state.setAcknowledged(event.target.checked)}
+            >
+              {confirmation.confirmationCheckboxLabel}
+            </Checkbox>
+          )}
+        </Box>
       }
+      primaryButtonProps={{ disabled: !state.canConfirm }}
       primaryButtonText={t('cairo.customFields.delete.modal.delete.CTA')}
       secondaryButtonText={t('cairo.customFields.delete.modal.cancel.CTA')}
     />

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle1763695214";
+var _namespace_ = "DragHandle1167282240";
 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":"DragHandle1763695214__root"};
+export var classes = {"root":"DragHandle1167282240__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_ = "EditableCell954666621";
+var _namespace_ = "EditableCell1965753014";
 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":"EditableCell954666621__root","errorMessage":"EditableCell954666621__errorMessage"};
+export var classes = {"root":"EditableCell1965753014__root","errorMessage":"EditableCell1965753014__errorMessage"};
 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_ = "HeaderActionsPopover1402474605";
+var _namespace_ = "HeaderActionsPopover1841069991";
 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":"HeaderActionsPopover1402474605__root"};
+export var classes = {"root":"HeaderActionsPopover1841069991__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_ = "CellViewLayout810755829";
+var _namespace_ = "CellViewLayout403490602";
 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":"CellViewLayout810755829__root"};
+export var classes = {"root":"CellViewLayout403490602__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};