@wix/patterns 1.477.0 → 1.478.0

package/dist/types/version.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.477.0",
+  "version": "1.478.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.383.0",
-    "@wix/bex-utils": "2.170.0",
+    "@wix/bex-core": "2.384.0",
+    "@wix/bex-utils": "2.171.0",
     "@wix/essentials": "^0.1.26",
-    "@wix/patterns-fields": "1.105.0",
-    "@wix/patterns-fields-utils": "1.86.0",
+    "@wix/patterns-fields": "1.106.0",
+    "@wix/patterns-fields-utils": "1.87.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.145.0",
+    "@wix/cairo-integration-utils": "1.146.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": "5cefc3ca4e09b0877d0a032d004f0be236ae6aa7b8a55d253ed7cb34"
+  "falconPackageHash": "32bb112ed4e7ae09aa2016a3566aabdc88794354d1d05726bf308dc6"
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CardContainer3407076452";
+var _namespace_ = "CardContainer1421580394";
 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":"CardContainer3407076452__root"};
+export var classes = {"root":"CardContainer1421580394__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_ = "CmsFieldForm1674214116";
+var _namespace_ = "CmsFieldForm1717452422";
 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":"CmsFieldForm1674214116__root","fullBleedDivider":"CmsFieldForm1674214116__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm1717452422__root","fullBleedDivider":"CmsFieldForm1717452422__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_ = "CmsFieldModal3283484593";
+var _namespace_ = "CmsFieldModal402786758";
 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":"CmsFieldModal3283484593__root","modal":"CmsFieldModal3283484593__modal"};
+export var classes = {"root":"CmsFieldModal402786758__root","modal":"CmsFieldModal402786758__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_ = "ValidationAndDefaultsSection2638218180";
+var _namespace_ = "ValidationAndDefaultsSection436691404";
 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":"ValidationAndDefaultsSection2638218180__root","accordionWrapper":"ValidationAndDefaultsSection2638218180__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection436691404__root","accordionWrapper":"ValidationAndDefaultsSection436691404__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_ = "Collapse4129688331";
+var _namespace_ = "Collapse2472116571";
 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":"Collapse4129688331__root","exit":"Collapse4129688331__exit"};
+export var classes = {"root":"Collapse2472116571__root","exit":"Collapse2472116571__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_ = "CollectionPage639137216";
+var _namespace_ = "CollectionPage2431242528";
 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":"CollectionPage639137216__root"};
+export var classes = {"root":"CollectionPage2431242528__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_ = "CollectionSectionHeader2580768530";
+var _namespace_ = "CollectionSectionHeader1506670591";
 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":"CollectionSectionHeader2580768530__root","summaryIcon":"CollectionSectionHeader2580768530__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader1506670591__root","summaryIcon":"CollectionSectionHeader1506670591__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_ = "CollectionTable2518731116";
+var _namespace_ = "CollectionTable3207596603";
 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":"CollectionTable2518731116__root"};
+export var classes = {"root":"CollectionTable3207596603__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_ = "CollectionTableWSRTable3004287980";
+var _namespace_ = "CollectionTableWSRTable4219007909";
 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":"CollectionTableWSRTable3004287980__root"};
+export var classes = {"root":"CollectionTableWSRTable4219007909__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar3194474827";
+var _namespace_ = "CollectionToolbar3488789661";
 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":"CollectionToolbar3194474827__root","right":"CollectionToolbar3194474827__right","left":"CollectionToolbar3194474827__left","fullWidth":"CollectionToolbar3194474827__fullWidth"};
+export var classes = {"root":"CollectionToolbar3488789661__root","right":"CollectionToolbar3488789661__right","left":"CollectionToolbar3488789661__left","fullWidth":"CollectionToolbar3488789661__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_ = "SearchOrCustomFilter2727495205";
+var _namespace_ = "SearchOrCustomFilter1596131213";
 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":"SearchOrCustomFilter2727495205__root","search":"SearchOrCustomFilter2727495205__search","searchMobile":"SearchOrCustomFilter2727495205__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter1596131213__root","search":"SearchOrCustomFilter1596131213__search","searchMobile":"SearchOrCustomFilter1596131213__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/ToolbarOverflowMenu.tsx

@@ -1,5 +1,6 @@
 import React, {
   ReactElement,
+  ReactNode,
   useCallback,
   useEffect,
   useRef,
@@ -19,12 +20,14 @@ import {
   DataCollection,
   MoreSmall,
 } from '@wix/wix-ui-icons-common/lazy';
+import uniqueId from 'lodash/uniqueId';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { ViewTypeState } from '../../state/ViewTypeState';
 import {
   layoutOptions,
   layoutConfig,
 } from '../TableGridSwitchButton/layoutConfig';
+import { DisabledTooltip } from '../DisabledTooltip';
 
 type Translate = ReturnType<typeof useWixPatternsContainer>['translate'];
 type Focusable = { focus: () => void };
@@ -41,6 +44,8 @@ export interface ToolbarOverflowSecondaryItem {
   prefixIcon: ReactElement;
   onClick: () => void;
   dataHook?: string;
+  disabled?: boolean;
+  disabledDescription?: ReactNode;
 }
 
 export interface ToolbarOverflowLayoutSwitchConfig {
@@ -182,6 +187,16 @@ function MainView({
 }) {
   const firstItemRef = useRef<Focusable | null>(null);
   const layoutSwitchRef = useRef<Focusable | null>(null);
+  const [descriptionIdPrefix] = useState(() =>
+    uniqueId('toolbar-overflow-disabled-description-'),
+  );
+  const disabledDescriptionId = (
+    item: ToolbarOverflowSecondaryItem,
+    index: number,
+  ) =>
+    item.disabled && item.disabledDescription
+      ? `${descriptionIdPrefix}${index}`
+      : undefined;
 
   useEffect(() => {
     const target = focusTarget.current;
@@ -246,22 +261,38 @@ function MainView({
         />
       )}
       {secondaryItems.map((item, index) => (
-        <ListItemAction
-          key={index}
-          ref={
-            !isFirstItemPrimary && !layoutSwitchConfig && index === 0
-              ? firstItemRef
-              : undefined
-          }
-          size="medium"
-          title={item.text}
-          onClick={() => {
-            item.onClick();
-            onItemClick();
-          }}
-          prefixIcon={item.prefixIcon}
-          dataHook={item.dataHook}
-        />
+        <React.Fragment key={index}>
+          <DisabledTooltip
+            content={item.disabledDescription}
+            disabled={!item.disabledDescription}
+            placement="left"
+            width="100%"
+            dataHook={item.dataHook && `${item.dataHook}-disabled-tooltip`}
+          >
+            <ListItemAction
+              ref={
+                !isFirstItemPrimary && !layoutSwitchConfig && index === 0
+                  ? firstItemRef
+                  : undefined
+              }
+              size="medium"
+              title={item.text}
+              onClick={() => {
+                item.onClick();
+                onItemClick();
+              }}
+              prefixIcon={item.prefixIcon}
+              dataHook={item.dataHook}
+              disabled={item.disabled}
+              aria-describedby={disabledDescriptionId(item, index)}
+            />
+          </DisabledTooltip>
+          {disabledDescriptionId(item, index) && (
+            <span id={disabledDescriptionId(item, index)} hidden>
+              {item.disabledDescription}
+            </span>
+          )}
+        </React.Fragment>
       ))}
     </>
   );

package/src/components/CollectionToolbar/useToolbarOverflowItems.ts

@@ -13,6 +13,7 @@ import {
   UploadExport,
   DownloadImport,
 } from '@wix/wix-ui-icons-common/lazy';
+import type { ImportButtonProps } from '../ImportButton/ImportProps';
 
 export interface ToolbarOverflowItems {
   primaryItems: ToolbarOverflowPrimaryItem[];
@@ -81,11 +82,17 @@ export function useToolbarOverflowItems(
     }
 
     if (props.importButton && importState) {
+      const { disabled, disabledReason }: Partial<ImportButtonProps> =
+        React.isValidElement<ImportButtonProps>(props.importButton)
+          ? props.importButton.props
+          : {};
       secondaryItems.push({
         text: t('cairo.import.import', { defaultValue: '' }),
         prefixIcon: React.createElement(DownloadImport),
         onClick: () => importState.open(),
         dataHook: 'overflow-import',
+        disabled,
+        disabledDescription: disabledReason,
       });
     }
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly743691857";
+var _namespace_ = "AutoCompleteReadonly2505609745";
 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":"AutoCompleteReadonly743691857__root"};
+export var classes = {"root":"AutoCompleteReadonly2505609745__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_ = "ViewsDropdown1944484198";
+var _namespace_ = "ViewsDropdown3166874312";
 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":"ViewsDropdown1944484198__root"};
+export var classes = {"root":"ViewsDropdown3166874312__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomFieldModal/CustomFieldForm.tsx

@@ -134,9 +134,12 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
             <FormField
               dataHook="custom-field-modal-field-key"
               required
-              label={t(
-                'cairo.customFields.addCustomField.modal.advancedSettings.key.title',
-              )}
+              label={
+                fieldModal.text.keyLabel ??
+                t(
+                  'cairo.customFields.addCustomField.modal.advancedSettings.key.title',
+                )
+              }
               infoContent={
                 mode === 'new'
                   ? t(
@@ -152,7 +155,7 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
                 disabled={mode === 'edit'}
                 value={key.value}
                 onChange={(e) => {
-                  key.onChange(e.target.value.toLowerCase());
+                  key.onChange(e.target.value);
                   customFieldModalBiReporter.reportKeyFormFieldChange();
                 }}
                 placeholder={t(

package/src/components/CustomFieldModal/CustomFieldFormPiiFields.st.css

@@ -0,0 +1,15 @@
+@property st-global(--wds-tooltip-label-font-line-height-medium);
+@property st-global(--wds-font-line-height-body-small);
+@property st-global(--wds-font-line-height-body-tiny);
+@property st-global(--wsr-text-line-height-small);
+
+.tooltipText {
+  /* Rich tooltip content needs the same line height as WDS's string content. */
+  --wds-font-line-height-body-tiny: var(
+    --wds-tooltip-label-font-line-height-medium,
+    var(
+      --wds-font-line-height-body-small,
+      var(--wsr-text-line-height-small, 18px)
+    )
+  );
+}

package/src/components/CustomFieldModal/CustomFieldFormPiiFields.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "CustomFieldFormPiiFields507618773";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"CustomFieldFormPiiFields507618773__root","tooltipText":"CustomFieldFormPiiFields507618773__tooltipText"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wds-tooltip-label-font-line-height-medium":"--wds-tooltip-label-font-line-height-medium","wds-font-line-height-body-small":"--wds-font-line-height-body-small","wds-font-line-height-body-tiny":"--wds-font-line-height-body-tiny","wsr-text-line-height-small":"--wsr-text-line-height-small"}; 
+
+
+
+

package/src/components/CustomFieldModal/CustomFieldFormPiiFields.tsx

@@ -11,6 +11,8 @@ import {
 } from '@wix/design-system';
 import type { FieldPiiWarning } from '@wix/bex-core';
 import { Trans } from '../Trans';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
+import { classes } from './CustomFieldFormPiiFields.st.css.js';
 
 interface PiiFormFieldsProps {
   containsPii: {
@@ -29,6 +31,8 @@ export function PiiFormFields({
   language,
   piiWarning,
 }: PiiFormFieldsProps) {
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+  const tooltipTextSize = isBmHarmonyTheme ? 'tiny' : 'small';
   const translateKeys = {
     toggleName:
       'cairo.customFields.addCustomField.modal.PII-setting.toggle.name',
@@ -59,20 +63,28 @@ export function PiiFormFields({
               <InfoIcon
                 size="small"
                 content={
-                  <Trans
-                    i18nKey={translateKeys.toggleInfo}
-                    components={{
-                      linkVal: (
-                        <TextButton
-                          as="a"
-                          href={whyIsItImportantLink}
-                          underline="always"
-                          size="small"
-                          target="_blank"
-                        />
-                      ),
-                    }}
-                  />
+                  <Text
+                    className={classes.tooltipText}
+                    size={tooltipTextSize}
+                    weight={isBmHarmonyTheme ? 'normal' : 'thin'}
+                    light
+                  >
+                    <Trans
+                      i18nKey={translateKeys.toggleInfo}
+                      components={{
+                        linkVal: (
+                          <TextButton
+                            as="a"
+                            href={whyIsItImportantLink}
+                            underline="always"
+                            size={tooltipTextSize}
+                            skin="light"
+                            target="_blank"
+                          />
+                        ),
+                      }}
+                    />
+                  </Text>
                 }
               />
             </Box>

package/src/components/CustomFieldModal/CustomFieldTypeDropdown.tsx

@@ -22,13 +22,12 @@ export const _CustomFieldTypeDropdown = (
   const {
     state: {
       form: {
-        $: { type, name, containsPii },
+        $: { type, containsPii },
       },
       mode,
       lockedProperties,
       fieldManagement: { fieldModal },
-      generateUniqueKey,
-      setKeyFieldIfNotDirty,
+      applyFieldTypeDefaults,
     },
   } = props;
 
@@ -132,7 +131,7 @@ export const _CustomFieldTypeDropdown = (
         if (!props.state.typeSupportsPii) {
           containsPii.onChange(false);
         }
-        setKeyFieldIfNotDirty(generateUniqueKey(name.value));
+        applyFieldTypeDefaults();
       }}
       onClose={() => setSearch(null)}
       popoverProps={{ appendTo: 'window', zIndex: 5001 }}

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

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

package/src/components/EditableTable/AddItemRow.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { AddItem } from '@wix/design-system';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 export interface AddItemRowProps {
   onAdd: () => void;
+  disabledReason?: ReactNode;
 }
 
-export function AddItemRow({ onAdd }: AddItemRowProps) {
+export function AddItemRow({ onAdd, disabledReason }: AddItemRowProps) {
   const { translate: t } = useWixPatternsContainer();
   return (
     <div
@@ -29,6 +30,8 @@ export function AddItemRow({ onAdd }: AddItemRowProps) {
         removePadding
         borderRadius="6px"
         onClick={onAdd}
+        disabled={!!disabledReason}
+        tooltipContent={disabledReason}
       >
         {t('cairo.editableTable.addItem.CTA')}
       </AddItem>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell63700743";
+var _namespace_ = "EditableCell418220247";
 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":"EditableCell63700743__root","errorMessage":"EditableCell63700743__errorMessage"};
+export var classes = {"root":"EditableCell418220247__root","errorMessage":"EditableCell418220247__errorMessage"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};