@wix/patterns 1.444.0 → 1.445.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CardContainer2554583830";
+var _namespace_ = "CardContainer3128965469";
 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":"CardContainer2554583830__root"};
+export var classes = {"root":"CardContainer3128965469__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_ = "CmsFieldForm3946965538";
+var _namespace_ = "CmsFieldForm713749527";
 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":"CmsFieldForm3946965538__root","fullBleedDivider":"CmsFieldForm3946965538__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm713749527__root","fullBleedDivider":"CmsFieldForm713749527__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_ = "CmsFieldModal1975015044";
+var _namespace_ = "CmsFieldModal236915718";
 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":"CmsFieldModal1975015044__root","modal":"CmsFieldModal1975015044__modal"};
+export var classes = {"root":"CmsFieldModal236915718__root","modal":"CmsFieldModal236915718__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_ = "ValidationAndDefaultsSection3500341913";
+var _namespace_ = "ValidationAndDefaultsSection3169958293";
 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":"ValidationAndDefaultsSection3500341913__root","accordionWrapper":"ValidationAndDefaultsSection3500341913__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection3169958293__root","accordionWrapper":"ValidationAndDefaultsSection3169958293__accordionWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/formFields/CharactersLimitInput.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CharactersLimitInput3476635084";
+var _namespace_ = "CharactersLimitInput3585359964";
 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":"CharactersLimitInput3476635084__root","field":"CharactersLimitInput3476635084__field"};
+export var classes = {"root":"CharactersLimitInput3585359964__root","field":"CharactersLimitInput3585359964__field"};
 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_ = "Collapse2957174514";
+var _namespace_ = "Collapse2410963627";
 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":"Collapse2957174514__root","exit":"Collapse2957174514__exit"};
+export var classes = {"root":"Collapse2410963627__root","exit":"Collapse2410963627__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPage2450011650";
+var _namespace_ = "CollectionPage937746320";
 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":"CollectionPage2450011650__root"};
+export var classes = {"root":"CollectionPage937746320__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_ = "CollectionSectionHeader2292765663";
+var _namespace_ = "CollectionSectionHeader2225851478";
 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":"CollectionSectionHeader2292765663__root","summaryIcon":"CollectionSectionHeader2292765663__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader2225851478__root","summaryIcon":"CollectionSectionHeader2225851478__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_ = "CollectionTable1183688564";
+var _namespace_ = "CollectionTable839224026";
 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":"CollectionTable1183688564__root"};
+export var classes = {"root":"CollectionTable839224026__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_ = "CollectionTableWSRTable1207533983";
+var _namespace_ = "CollectionTableWSRTable555993268";
 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":"CollectionTableWSRTable1207533983__root"};
+export var classes = {"root":"CollectionTableWSRTable555993268__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionTable/CollectionTableWSRTable.tsx

@@ -49,7 +49,7 @@ export interface CollectionTableWSRTableBaseProps<U, T, F extends FiltersMap>
       | 'skin'
     > {
   /**
-   * @deprecated The table skin is fixed to `"neutral"` and any value passed here is ignored. This prop will be removed in a future release.
+   * @deprecated The table skin is determined internally and any value passed here is ignored. This prop will be removed in a future release.
    */
   skin?: TableProps<KeyedItem<U>>['skin'];
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar1341892814";
+var _namespace_ = "CollectionToolbar1623100111";
 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":"CollectionToolbar1341892814__root","right":"CollectionToolbar1341892814__right","left":"CollectionToolbar1341892814__left","fullWidth":"CollectionToolbar1341892814__fullWidth"};
+export var classes = {"root":"CollectionToolbar1623100111__root","right":"CollectionToolbar1623100111__right","left":"CollectionToolbar1623100111__left","fullWidth":"CollectionToolbar1623100111__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter3124943132";
+var _namespace_ = "SearchOrCustomFilter3012136456";
 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":"SearchOrCustomFilter3124943132__root","search":"SearchOrCustomFilter3124943132__search","searchMobile":"SearchOrCustomFilter3124943132__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter3012136456__root","search":"SearchOrCustomFilter3012136456__search","searchMobile":"SearchOrCustomFilter3012136456__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_ = "AutoCompleteReadonly4229998832";
+var _namespace_ = "AutoCompleteReadonly434646455";
 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":"AutoCompleteReadonly4229998832__root"};
+export var classes = {"root":"AutoCompleteReadonly434646455__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_ = "ViewsDropdown2458184276";
+var _namespace_ = "ViewsDropdown15537165";
 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":"ViewsDropdown2458184276__root"};
+export var classes = {"root":"ViewsDropdown15537165__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomFieldModal/CustomFieldCollectionInput.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  AutoComplete,
+  Box,
+  Cell,
+  FormField,
+  listItemSelectBuilder,
+} from '@wix/design-system';
+import { CustomFieldModalState } from '@wix/bex-core';
+
+export interface CustomFieldCollectionInputProps {
+  state: CustomFieldModalState;
+}
+
+export const _CustomFieldCollectionInput = ({
+  state,
+}: CustomFieldCollectionInputProps) => {
+  const {
+    form: {
+      $: { referencedCollectionId },
+    },
+  } = state;
+  const [search, setSearch] = React.useState<string | null>(null);
+  const query = search?.trim().toLowerCase() ?? '';
+  const loader = state.collectionOptionsLoader;
+
+  useEffect(() => {
+    void state.loadCollectionOptions();
+  }, [loader, state]);
+
+  if (!state.collectionInput) {
+    return null;
+  }
+
+  const options = query
+    ? state.collectionOptions.filter((option) =>
+        option.label.toLowerCase().includes(query),
+      )
+    : state.collectionOptions;
+  const selectedOption = state.collectionOptions.find(
+    (option) => option.id === referencedCollectionId.value,
+  );
+
+  return (
+    <Cell span={12}>
+      <FormField
+        dataHook="custom-field-modal-field-reference-collection"
+        required={state.collectionInput.required ?? true}
+        label={state.collectionInputLabel}
+        status={referencedCollectionId.hasError ? 'error' : undefined}
+        statusMessage={referencedCollectionId.error}
+      >
+        <AutoComplete
+          dataHook="custom-field-modal-reference-collection"
+          disabled={state.mode === 'edit'}
+          value={
+            search ??
+            selectedOption?.label ??
+            referencedCollectionId.value ??
+            ''
+          }
+          selectedId={referencedCollectionId.value}
+          onChange={(event) => setSearch(event.target.value)}
+          onSelect={({ id }) => {
+            state.setReferencedCollectionId(String(id));
+            setSearch(null);
+          }}
+          onClose={() => setSearch(null)}
+          status={
+            referencedCollectionId.hasError || state.collectionOptionsError
+              ? 'error'
+              : undefined
+          }
+          placeholder={state.collectionInputPlaceholder}
+          emptyStateMessage={state.collectionInputEmptyStateMessage}
+          options={options.map((option) =>
+            listItemSelectBuilder({
+              dataHook: `custom-field-modal-reference-collection-${option.id}`,
+              id: option.id,
+              title: option.label,
+              label: option.label,
+            }),
+          )}
+          popoverProps={{ appendTo: 'window', zIndex: 5001 }}
+        />
+        {state.collectionOptionsLoading && (
+          <Box dataHook="custom-field-modal-reference-collection-loading" />
+        )}
+      </FormField>
+    </Cell>
+  );
+};
+
+export const CustomFieldCollectionInput = observer(_CustomFieldCollectionInput);

package/src/components/CustomFieldModal/CustomFieldForm.tsx

@@ -13,12 +13,16 @@ import {
 } from '@wix/design-system';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { CustomFieldModalState } from '@wix/bex-core';
-import { InfoCircle } from '@wix/wix-ui-icons-common';
-import { StatusAlertFilledSmall } from '@wix/wix-ui-icons-common/lazy';
+import {
+  InfoCircle,
+  StatusAlertFilledSmall,
+} from '@wix/wix-ui-icons-common/lazy';
 import { runInAction } from 'mobx';
 import { CustomFieldTypeDropdown } from './CustomFieldTypeDropdown';
+import { CustomFieldCollectionInput } from './CustomFieldCollectionInput';
 import { PiiFormFields } from './CustomFieldFormPiiFields';
 import { CustomFieldFormPermissions } from './CustomFieldFormPermissions';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface CustomFieldFormProps {
   state: CustomFieldModalState;
@@ -43,6 +47,7 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
   } = state;
   const { fieldModal } = state.fieldManagement;
   const SettingsSection = state.settingsSection?.Component;
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   const {
     translate: t,
@@ -99,6 +104,7 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
               )}
             </FormField>
           </Cell>
+          <CustomFieldCollectionInput state={state} />
           <Cell span={6}>
             <FormField
               dataHook="custom-field-modal-field-name"
@@ -178,6 +184,8 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
               skin="standard"
               hideShadow
               horizontalPadding="large"
+              size={isBmHarmonyTheme ? 'tiny' : undefined}
+              contentPadding={isBmHarmonyTheme ? 'none' : undefined}
               items={[
                 {
                   title:
@@ -203,7 +211,12 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
                     );
                   },
                   children: (
-                    <Box direction="vertical" gap="SP4">
+                    <Box
+                      direction="vertical"
+                      gap="SP4"
+                      paddingLeft={isBmHarmonyTheme ? 'SP6' : undefined}
+                      paddingRight={isBmHarmonyTheme ? 'SP6' : undefined}
+                    >
                       {fieldModal.permissions && (
                         <CustomFieldFormPermissions state={state} />
                       )}

package/src/components/CustomFieldModal/CustomFieldModal.tsx

@@ -24,6 +24,7 @@ export const _CustomFieldModal = ({
   }
 
   const { translate: t } = useWixPatternsContainer();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
 
   const {
     mode,
@@ -71,7 +72,9 @@ export const _CustomFieldModal = ({
       secondaryButtonOnClick={() =>
         reportModalEndProcess({ endType: 'Cancel' })
       }
-      showFooterDivider
+      primaryButtonProps={isBmHarmonyTheme ? { skin: 'dark' } : undefined}
+      secondaryButtonProps={isBmHarmonyTheme ? { skin: 'dark' } : undefined}
+      showFooterDivider={!isBmHarmonyTheme}
     />
   );
 };

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

@@ -1,4 +1,5 @@
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import type { ButtonSkin } from '@wix/design-system';
 import {
   AccordionUniDriver,
   MessageModalLayoutUniDriver,
@@ -52,6 +53,14 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
     getCustomFieldModal()
       .getSecondaryButtonDriver()
       .then((driver: any) => driver.click());
+  const hasPrimaryButtonSkin = (skin: ButtonSkin) =>
+    getCustomFieldModal()
+      .getPrimaryButtonDriver()
+      .then((driver: any) => driver.hasSkin(skin));
+  const hasSecondaryButtonSkin = (skin: ButtonSkin) =>
+    getCustomFieldModal()
+      .getSecondaryButtonDriver()
+      .then((driver: any) => driver.hasSkin(skin));
   const isSettingsVisible = () => getSettingsAccordion().exists();
   const getSettingsLabel = () => getSettingsAccordion().getItemTitleAt(0);
   const isSettingsExpanded = () => getSettingsAccordion().isItemExpandedAt(0);
@@ -69,6 +78,11 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
     InputUniDriver(body.$('[data-hook="custom-field-modal-name"]'), body);
   const getFormKeyDriver = () =>
     InputUniDriver(body.$('[data-hook="custom-field-modal-key"]'), body);
+  const getFormReferenceCollectionDriver = () =>
+    DropdownUniDriver(
+      body.$('[data-hook="custom-field-modal-reference-collection"]'),
+      body,
+    );
 
   const getInstalledAppsSection = () =>
     body.$('[data-hook="custom-field-modal-apps-section"]');
@@ -111,6 +125,11 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
       body.$('[data-hook="custom-field-modal-field-key"]'),
       body,
     );
+  const getReferenceCollectionFormFieldDriver = () =>
+    FormFieldUniDriver(
+      body.$('[data-hook="custom-field-modal-field-reference-collection"]'),
+      body,
+    );
   const getSubtitle = () => {
     return TextUniDriver(
       body.$('[data-hook="baseModalLayout-subtitle"]'),
@@ -146,6 +165,7 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
     getFormTypeDriver,
     getFormNameDriver,
     getFormKeyDriver,
+    getFormReferenceCollectionDriver,
     getFormReadApps,
     getFormWriteApps,
     getFormReadUsers,
@@ -153,6 +173,7 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
     getTypeFormFieldDriver,
     getNameFormFieldDriver,
     getKeyFormFieldDriver,
+    getReferenceCollectionFormFieldDriver,
     getSubtitle,
     getPermissionNote,
     getEditPiiNote,
@@ -164,11 +185,13 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
     type,
     name,
     key,
+    referencedCollectionId,
     permissions,
   }: {
     type?: string;
     name?: string;
     key?: string;
+    referencedCollectionId?: string;
     permissions?: {
       read?: ('apps' | 'users')[];
       write?: ('apps' | 'users')[];
@@ -188,6 +211,12 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
       await getFormKeyDriver().enterText(key);
     }
 
+    if (referencedCollectionId) {
+      await getFormReferenceCollectionDriver().dropdownLayoutDriver.clickAtOptionByDataHook(
+        `custom-field-modal-reference-collection-${referencedCollectionId}`,
+      );
+    }
+
     if (permissions) {
       (
         [
@@ -207,10 +236,15 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
   };
 
   const getCustomFieldFormValues = async () => {
+    const referenceCollectionDriver = getFormReferenceCollectionDriver();
+
     return {
       type: await getFormTypeDriver().inputDriver.getValue(),
       name: await getFormNameDriver().getValue(),
       key: await getFormKeyDriver().getValue(),
+      referencedCollection: (await referenceCollectionDriver.exists())
+        ? await referenceCollectionDriver.inputDriver.getValue()
+        : undefined,
       permissions: {
         read: {
           apps: await getFormReadApps().isChecked(),
@@ -230,6 +264,8 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
     clickConfirm,
     clickClose,
     clickCancel,
+    hasPrimaryButtonSkin,
+    hasSecondaryButtonSkin,
     isSettingsVisible,
     getSettingsLabel,
     isSettingsExpanded,

package/src/components/CustomFieldModal/CustomFieldTypeDropdown.tsx

@@ -10,6 +10,7 @@ import {
 import { CustomFieldModalState } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface CustomFieldTypeDropdownProps {
   state: CustomFieldModalState;
@@ -31,6 +32,8 @@ export const _CustomFieldTypeDropdown = (
   } = props;
 
   const { translate: t } = useWixPatternsContainer();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+  const isFieldTypeDisabled = mode === 'edit';
 
   const [search, setSearch] = React.useState<string | null>(null);
   const query = search?.trim().toLowerCase() ?? '';
@@ -95,14 +98,17 @@ export const _CustomFieldTypeDropdown = (
   return (
     <AutoComplete
       dataHook="custom-field-modal-type"
-      disabled={mode === 'edit'}
+      disabled={isFieldTypeDisabled}
       value={search ?? selectedType?.label ?? ''}
       selectedId={type.value}
       prefix={
         search === null && selectedType ? (
           <Input.IconAffix>
-            {/* WDS paints input affix icons blue; the type icons stay dark. */}
-            <Box color="D10">
+            <Box
+              color={
+                isBmHarmonyTheme && isFieldTypeDisabled ? undefined : 'D10'
+              }
+            >
               {getFieldTypeIcon({
                 fieldType: selectedType.patternsType,
                 size: 'medium',
@@ -119,6 +125,7 @@ export const _CustomFieldTypeDropdown = (
         if (nextType !== type.value) {
           // The settings were filled in for the old type; the new one starts fresh.
           props.state.resetSettingsValues();
+          props.state.resetCollectionInput();
         }
         type.onChange(nextType);
         // Read off `props.state` — a destructured computed holds the pre-change value.

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle371561672";
+var _namespace_ = "DragHandle1948296544";
 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":"DragHandle371561672__root"};
+export var classes = {"root":"DragHandle1948296544__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_ = "EditableCell4132715005";
+var _namespace_ = "EditableCell3513595393";
 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":"EditableCell4132715005__root","errorMessage":"EditableCell4132715005__errorMessage"};
+export var classes = {"root":"EditableCell3513595393__root","errorMessage":"EditableCell3513595393__errorMessage"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableTableContextMenu.tsx

@@ -11,7 +11,7 @@ import {
   DeleteSmall,
   AddSmall,
   DuplicateSmall,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import type { EditableTableState, Cell } from '../../state/EditableTable';
 import { startEditingNewRow } from './useAddRow';