@wix/patterns 1.467.0 → 1.469.0

package/dist/cjs/components/Table/AddFieldColumnHeader.js

@@ -5,96 +5,143 @@ exports.AddFieldColumnHeader = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _designSystem = require("@wix/design-system");
 var _lazy = require("@wix/wix-ui-icons-common/lazy");
-var _ToolbarCollectionContext = require("../ToolbarCollectionContext");
+var _mobxReactLite = require("mobx-react-lite");
 var _AddFieldColumnHeaderStCss = require("./AddFieldColumnHeader.st.css.js");
+var _ToolbarCollectionContext = require("../ToolbarCollectionContext");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/Table/AddFieldColumnHeader.tsx";
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const AddFieldColumnHeader = ({
-  children
+const AddFieldColumnHeader = exports.AddFieldColumnHeader = (0, _mobxReactLite.observer)(({
+  children,
+  columnId
 }) => {
-  var _useContext, _collectionFieldsSour;
-  const collectionFieldsSource = (_useContext = (0, _react.useContext)(_ToolbarCollectionContext.ToolbarCollectionContext)) == null ? void 0 : _useContext.collectionFieldsSource;
-  // TODO: fix when the schema source exposes the CMS modal
-  const customColumnAddField = collectionFieldsSource != null && (_collectionFieldsSour = collectionFieldsSource.fieldsSource.fieldManagement) != null && _collectionFieldsSour.canAddFields ? () => collectionFieldsSource.openFieldModal({
-    origin: 'Custom columns panel'
-  }) : undefined;
-  const [hovered, setHovered] = (0, _react.useState)(false);
-  if (!collectionFieldsSource) {
+  var _collectionFieldsSour, _toolbar$columnSizesS;
+  const toolbar = (0, _ToolbarCollectionContext.useToolbarCollectionContext)();
+  const [side, setSide] = (0, _react.useState)('right');
+  const [isButtonShown, setIsButtonShown] = (0, _react.useState)(false);
+  const collectionFieldsSource = toolbar == null ? void 0 : toolbar.collectionFieldsSource;
+  if (!(collectionFieldsSource != null && (_collectionFieldsSour = collectionFieldsSource.fieldsSource.fieldManagement) != null && _collectionFieldsSour.canAddFields)) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+  }
+  if ((_toolbar$columnSizesS = toolbar.columnSizesState) != null && _toolbar$columnSizesS.isResizing) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
   }
-  return /*#__PURE__*/_react.default.createElement(_designSystem.Popover, {
-    shown: hovered,
+
+  // TODO: fix when the schema source exposes the CMS modal
+  const customColumnAddField = () => {
+    var _columns$slice$revers, _toolbar$customColumn;
+    const columns = toolbar.selectedOrderedColumnsOrAll;
+    const index = columns.findIndex(c => c.id === columnId);
+    const afterColumnId = side === 'left' ? ((_columns$slice$revers = columns.slice(0, Math.max(index, 0)).reverse().find(c => c.id != null)) == null ? void 0 : _columns$slice$revers.id) ?? null : columnId;
+    (_toolbar$customColumn = toolbar.customColumnsState) == null || _toolbar$customColumn.setPendingInsertPosition(afterColumnId);
+    collectionFieldsSource.openFieldModal({
+      origin: 'Table column header'
+    });
+  };
+  const handleMouseMove = event => {
+    const {
+      left,
+      width
+    } = event.currentTarget.getBoundingClientRect();
+    setSide(event.clientX < left + width / 2 ? 'left' : 'right');
+    setIsButtonShown(true);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    className: _AddFieldColumnHeaderStCss.classes.title,
+    "data-hook": "add-field-column-header-title",
+    onMouseMove: handleMouseMove,
+    onMouseLeave: () => setIsButtonShown(false),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 59,
+      columnNumber: 9
+    }
+  }, children), /*#__PURE__*/_react.default.createElement("span", {
+    className: _AddFieldColumnHeaderStCss.classes.anchorLayer,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 67,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Popover, {
+    shown: isButtonShown,
     appendTo: "window",
-    placement: "top-start",
-    moveBy: {
-      x: -27,
-      y: -47
-    },
+    placement: side === 'left' ? 'bottom-start' : 'bottom-end',
+    hideDelay: 200,
+    flip: false
+    // Turns off popper's preventOverflow, which otherwise pulls the button
+    // back inside the boundary and off the border it should sit on.
+    ,
+    fixed: true,
     interactive: true,
-    fluid: true,
-    onMouseEnter: () => setHovered(true),
-    onMouseLeave: () => setHovered(false),
-    className: _AddFieldColumnHeaderStCss.classes.root,
+    className: _AddFieldColumnHeaderStCss.classes.popover,
     dataHook: "add-field-popover",
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 32,
-      columnNumber: 5
+      lineNumber: 68,
+      columnNumber: 11
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Popover.Element, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 44,
-      columnNumber: 7
+      lineNumber: 81,
+      columnNumber: 13
     }
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: _AddFieldColumnHeaderStCss.classes.title,
+    "aria-hidden": true,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 45,
-      columnNumber: 9
+      lineNumber: 82,
+      columnNumber: 15
     }
-  }, children)), /*#__PURE__*/_react.default.createElement(_designSystem.Popover.Content, {
+  })), /*#__PURE__*/_react.default.createElement(_designSystem.Popover.Content, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 47,
-      columnNumber: 7
+      lineNumber: 84,
+      columnNumber: 13
     }
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: _AddFieldColumnHeaderStCss.classes.hoverBridge,
+    className: (0, _AddFieldColumnHeaderStCss.st)(_AddFieldColumnHeaderStCss.classes.hoverBridge, {
+      side
+    }),
+    "data-hook": "add-field-column-header",
+    "data-side": side,
+    onMouseEnter: () => setIsButtonShown(true),
+    onMouseLeave: () => setIsButtonShown(false),
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 48,
-      columnNumber: 9
+      lineNumber: 85,
+      columnNumber: 15
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.IconButton, {
+    ariaLabel: toolbar.container.translate('cairo.customFields.addCustomField.CTA'),
     size: "tiny",
-    skin: "standard",
+    skin: "dark",
     priority: "secondary",
     dataHook: "add-field-column-header-button",
     onClick: e => {
       e.stopPropagation();
-      customColumnAddField == null || customColumnAddField();
+      customColumnAddField();
     },
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 49,
-      columnNumber: 11
+      lineNumber: 92,
+      columnNumber: 17
     }
   }, /*#__PURE__*/_react.default.createElement(_lazy.Add, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 59,
-      columnNumber: 13
+      lineNumber: 105,
+      columnNumber: 19
     }
-  })))));
-};
-exports.AddFieldColumnHeader = AddFieldColumnHeader;
+  })))))));
+});
 //# sourceMappingURL=AddFieldColumnHeader.js.map

package/dist/cjs/components/Table/AddFieldColumnHeader.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_lazy","_ToolbarCollectionContext","_AddFieldColumnHeaderStCss","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AddFieldColumnHeader","children","_useContext","_collectionFieldsSour","collectionFieldsSource","useContext","ToolbarCollectionContext","customColumnAddField","fieldsSource","fieldManagement","canAddFields","openFieldModal","origin","undefined","hovered","setHovered","useState","createElement","Fragment","Popover","shown","appendTo","placement","moveBy","x","y","interactive","fluid","onMouseEnter","onMouseLeave","className","classes","root","dataHook","__self","__source","fileName","lineNumber","columnNumber","Element","title","Content","hoverBridge","IconButton","size","skin","priority","onClick","stopPropagation","Add","exports"],"sources":["../../../../src/components/Table/AddFieldColumnHeader.tsx"],"sourcesContent":["import React, { ReactNode, useContext, useState } from 'react';\nimport { IconButton, Popover } from '@wix/design-system';\nimport { Add } from '@wix/wix-ui-icons-common/lazy';\nimport { ToolbarCollectionContext } from '../ToolbarCollectionContext';\nimport { classes } from './AddFieldColumnHeader.st.css.js';\n\nexport interface AddFieldColumnHeaderProps {\n  children: ReactNode;\n}\n\nexport const AddFieldColumnHeader = ({\n  children,\n}: AddFieldColumnHeaderProps) => {\n  const collectionFieldsSource = useContext(\n    ToolbarCollectionContext,\n  )?.collectionFieldsSource;\n  // TODO: fix when the schema source exposes the CMS modal\n  const customColumnAddField = collectionFieldsSource?.fieldsSource\n    .fieldManagement?.canAddFields\n    ? () =>\n        collectionFieldsSource.openFieldModal({\n          origin: 'Custom columns panel',\n        })\n    : undefined;\n  const [hovered, setHovered] = useState(false);\n\n  if (!collectionFieldsSource) {\n    return <>{children}</>;\n  }\n\n  return (\n    <Popover\n      shown={hovered}\n      appendTo=\"window\"\n      placement=\"top-start\"\n      moveBy={{ x: -27, y: -47 }}\n      interactive\n      fluid\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      className={classes.root}\n      dataHook=\"add-field-popover\"\n    >\n      <Popover.Element>\n        <span className={classes.title}>{children}</span>\n      </Popover.Element>\n      <Popover.Content>\n        <span className={classes.hoverBridge}>\n          <IconButton\n            size=\"tiny\"\n            skin=\"standard\"\n            priority=\"secondary\"\n            dataHook=\"add-field-column-header-button\"\n            onClick={(e) => {\n              e.stopPropagation();\n              customColumnAddField?.();\n            }}\n          >\n            <Add />\n          </IconButton>\n        </span>\n      </Popover.Content>\n    </Popover>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_lazy","_mobxReactLite","_AddFieldColumnHeaderStCss","_ToolbarCollectionContext","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AddFieldColumnHeader","exports","observer","children","columnId","_collectionFieldsSour","_toolbar$columnSizesS","toolbar","useToolbarCollectionContext","side","setSide","useState","isButtonShown","setIsButtonShown","collectionFieldsSource","fieldsSource","fieldManagement","canAddFields","createElement","Fragment","columnSizesState","isResizing","customColumnAddField","_columns$slice$revers","_toolbar$customColumn","columns","selectedOrderedColumnsOrAll","index","findIndex","c","id","afterColumnId","slice","Math","max","reverse","find","customColumnsState","setPendingInsertPosition","openFieldModal","origin","handleMouseMove","event","left","width","currentTarget","getBoundingClientRect","clientX","className","classes","title","onMouseMove","onMouseLeave","__self","__source","fileName","lineNumber","columnNumber","anchorLayer","Popover","shown","appendTo","placement","hideDelay","flip","fixed","interactive","popover","dataHook","Element","Content","st","hoverBridge","onMouseEnter","IconButton","ariaLabel","container","translate","size","skin","priority","onClick","stopPropagation","Add"],"sources":["../../../../src/components/Table/AddFieldColumnHeader.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\nimport { IconButton, Popover } from '@wix/design-system';\nimport { Add } from '@wix/wix-ui-icons-common/lazy';\nimport { observer } from 'mobx-react-lite';\nimport { classes, st } from './AddFieldColumnHeader.st.css.js';\nimport { useToolbarCollectionContext } from '../ToolbarCollectionContext';\n\nexport interface AddFieldColumnHeaderProps {\n  children: ReactNode;\n  /** This column's id. The right border inserts after it. */\n  columnId: string;\n}\n\ntype Side = 'left' | 'right';\n\nexport const AddFieldColumnHeader = observer(\n  ({ children, columnId }: AddFieldColumnHeaderProps) => {\n    const toolbar = useToolbarCollectionContext();\n    const [side, setSide] = useState<Side>('right');\n    const [isButtonShown, setIsButtonShown] = useState(false);\n\n    const collectionFieldsSource = toolbar?.collectionFieldsSource;\n\n    if (!collectionFieldsSource?.fieldsSource.fieldManagement?.canAddFields) {\n      return <>{children}</>;\n    }\n\n    if (toolbar.columnSizesState?.isResizing) {\n      return <>{children}</>;\n    }\n\n    // TODO: fix when the schema source exposes the CMS modal\n    const customColumnAddField = () => {\n      const columns = toolbar.selectedOrderedColumnsOrAll;\n      const index = columns.findIndex((c) => c.id === columnId);\n      const afterColumnId =\n        side === 'left'\n          ? columns\n              .slice(0, Math.max(index, 0))\n              .reverse()\n              .find((c) => c.id != null)?.id ?? null\n          : columnId;\n\n      toolbar.customColumnsState?.setPendingInsertPosition(afterColumnId);\n      collectionFieldsSource.openFieldModal({\n        origin: 'Table column header',\n      });\n    };\n\n    const handleMouseMove = (event: React.MouseEvent<HTMLSpanElement>) => {\n      const { left, width } = event.currentTarget.getBoundingClientRect();\n\n      setSide(event.clientX < left + width / 2 ? 'left' : 'right');\n      setIsButtonShown(true);\n    };\n\n    return (\n      <>\n        <span\n          className={classes.title}\n          data-hook=\"add-field-column-header-title\"\n          onMouseMove={handleMouseMove}\n          onMouseLeave={() => setIsButtonShown(false)}\n        >\n          {children}\n        </span>\n        <span className={classes.anchorLayer}>\n          <Popover\n            shown={isButtonShown}\n            appendTo=\"window\"\n            placement={side === 'left' ? 'bottom-start' : 'bottom-end'}\n            hideDelay={200}\n            flip={false}\n            // Turns off popper's preventOverflow, which otherwise pulls the button\n            // back inside the boundary and off the border it should sit on.\n            fixed\n            interactive\n            className={classes.popover}\n            dataHook=\"add-field-popover\"\n          >\n            <Popover.Element>\n              <span aria-hidden />\n            </Popover.Element>\n            <Popover.Content>\n              <span\n                className={st(classes.hoverBridge, { side })}\n                data-hook=\"add-field-column-header\"\n                data-side={side}\n                onMouseEnter={() => setIsButtonShown(true)}\n                onMouseLeave={() => setIsButtonShown(false)}\n              >\n                <IconButton\n                  ariaLabel={toolbar.container.translate(\n                    'cairo.customFields.addCustomField.CTA',\n                  )}\n                  size=\"tiny\"\n                  skin=\"dark\"\n                  priority=\"secondary\"\n                  dataHook=\"add-field-column-header-button\"\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    customColumnAddField();\n                  }}\n                >\n                  <Add />\n                </IconButton>\n              </span>\n            </Popover.Content>\n          </Popover>\n        </span>\n      </>\n    );\n  },\n);\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/Table/AddFieldColumnHeader.st.css

@@ -1,36 +1,59 @@
-.root {
-  display: inline-flex;
-  align-items: center;
+@property st-global(--wds-space-150);
+@property st-global(--wds-popover-fill);
+@property st-global(--wds-popover-border-width);
+@property st-global(--wds-popover-border-radius);
+@property st-global(--wds-shadow-surface-overlay);
+@property st-global(--wds-background-blur-surface-overlay);
+
+/* Non-resizable WDS headers have no positioning context. Sticky headers
+   already provide one and must keep their sticky positioning. */
+:global(th:not([data-sticky='true'])):has(.anchorLayer) {
+  position: relative;
+}
+
+.anchorLayer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.anchorLayer > .popover {
+  display: grid;
   width: 100%;
-  min-width: 0;
+  height: 100%;
+}
+
+.popover {
+  --wds-popover-fill: transparent;
+  --wds-popover-border-width: 0;
+  --wds-popover-border-radius: 0;
+  --wds-shadow-surface-overlay: none;
+  --wds-background-blur-surface-overlay: 0px;
 }
 
 .title {
   display: flex;
+  align-items: center;
+  box-sizing: content-box;
   width: 100%;
   min-width: 0;
+  /* Cover WDS's block padding without changing the header's layout height. */
+  min-height: 24px;
+  margin-block: calc(-1 * var(--wds-space-150, 9px));
+  padding-block: var(--wds-space-150, 9px);
 }
 
 /* Invisible hit-area around the IconButton so the cursor can travel from the
-   title up to the button without leaving the hover area (interactive=true
-   keeps the popover open while hovering the content). padding-bottom matches
-   moveBy.y so the bridge reaches the title's top edge. */
+   title to the button without leaving the hover area (interactive=true keeps
+   the popover open while hovering the content). */
 .hoverBridge {
+  -st-states: side(enum(left, right));
   display: inline-block;
-  padding: 4px 13px 4px 4px;
+  padding: 4px;
   background: transparent;
+  transform: translate(50%, -50%);
 }
 
-/* Popover content is portaled to <body> via appendTo="window", so it isn't a
-   descendant of the trigger. WDS sets data-content-element on the portaled
-   element to a unique id that includes our dataHook ("add-field-popover"),
-   so we link to it that way. */
-:global(
-    [data-content-element^='popover-content-add-field-popover-'][data-hook='popover-content'][class]
-  ) {
-  background: transparent;
-  border: none;
-  box-shadow: none;
-  border-radius: 0;
-  padding: 0;
+.hoverBridge:side(left) {
+  transform: translate(-50%, -50%);
 }

package/dist/cjs/components/Table/AddFieldColumnHeader.st.css.js

@@ -5,20 +5,29 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "AddFieldColumnHeader1088053720";
+var _namespace_ = "AddFieldColumnHeader3342868055";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "AddFieldColumnHeader1088053720__root",
-  "title": "AddFieldColumnHeader1088053720__title",
-  "hoverBridge": "AddFieldColumnHeader1088053720__hoverBridge"
+  "root": "AddFieldColumnHeader3342868055__root",
+  "anchorLayer": "AddFieldColumnHeader3342868055__anchorLayer",
+  "popover": "AddFieldColumnHeader3342868055__popover",
+  "title": "AddFieldColumnHeader3342868055__title",
+  "hoverBridge": "AddFieldColumnHeader3342868055__hoverBridge"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};
 var containers = exports.containers = {};
 var stVars = exports.stVars = {};
-var vars = exports.vars = {};
+var vars = exports.vars = {
+  "wds-space-150": "--wds-space-150",
+  "wds-popover-fill": "--wds-popover-fill",
+  "wds-popover-border-width": "--wds-popover-border-width",
+  "wds-popover-border-radius": "--wds-popover-border-radius",
+  "wds-shadow-surface-overlay": "--wds-shadow-surface-overlay",
+  "wds-background-blur-surface-overlay": "--wds-background-blur-surface-overlay"
+};
 //# sourceMappingURL=AddFieldColumnHeader.st.css.js.map

package/dist/cjs/components/Table/AddFieldColumnHeader.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/Table/AddFieldColumnHeader.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"AddFieldColumnHeader1088053720\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"AddFieldColumnHeader1088053720__root\",\"title\":\"AddFieldColumnHeader1088053720__title\",\"hoverBridge\":\"AddFieldColumnHeader1088053720__hoverBridge\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,gCAAgC;AAClD,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,sCAAsC;EAAC,OAAO,EAAC,uCAAuC;EAAC,aAAa,EAAC;AAA6C,CAAC;AACzK,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/Table/AddFieldColumnHeader.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"AddFieldColumnHeader3342868055\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"AddFieldColumnHeader3342868055__root\",\"anchorLayer\":\"AddFieldColumnHeader3342868055__anchorLayer\",\"popover\":\"AddFieldColumnHeader3342868055__popover\",\"title\":\"AddFieldColumnHeader3342868055__title\",\"hoverBridge\":\"AddFieldColumnHeader3342868055__hoverBridge\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-space-150\":\"--wds-space-150\",\"wds-popover-fill\":\"--wds-popover-fill\",\"wds-popover-border-width\":\"--wds-popover-border-width\",\"wds-popover-border-radius\":\"--wds-popover-border-radius\",\"wds-shadow-surface-overlay\":\"--wds-shadow-surface-overlay\",\"wds-background-blur-surface-overlay\":\"--wds-background-blur-surface-overlay\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,gCAAgC;AAClD,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,sCAAsC;EAAC,aAAa,EAAC,6CAA6C;EAAC,SAAS,EAAC,yCAAyC;EAAC,OAAO,EAAC,uCAAuC;EAAC,aAAa,EAAC;AAA6C,CAAC;AACzR,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,eAAe,EAAC,iBAAiB;EAAC,kBAAkB,EAAC,oBAAoB;EAAC,0BAA0B,EAAC,4BAA4B;EAAC,2BAA2B,EAAC,6BAA6B;EAAC,4BAA4B,EAAC,8BAA8B;EAAC,qCAAqC,EAAC;AAAuC,CAAC","ignoreList":[]}

package/dist/cjs/components/Table/AddFieldColumnHeader.uni.driver.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.AddFieldColumnHeaderUniDriver = AddFieldColumnHeaderUniDriver;
+exports.default = void 0;
+var _unidriver = require("@wix/design-system/dist/testkit/unidriver");
+var _unidriver2 = require("../../unidriver");
+function AddFieldColumnHeaderUniDriver(base, body) {
+  const bridge = body.$('[data-hook="add-field-column-header"]');
+  const addButton = body.$('[data-hook="add-field-column-header-button"]');
+  return {
+    ...(0, _unidriver2.baseUniDriverFactory)(base),
+    /**
+     * Moves the pointer over the column title, which is what reveals the
+     * button. The border it lands on comes from where the pointer is across
+     * the title, so only a laid-out browser can produce a left one.
+     */
+    hoverTitle: () => base.mouse.moveTo(base),
+    /** The border the button sits on: "left" or "right". */
+    getSide: () => bridge.attr('data-side'),
+    addButtonExists: () => addButton.exists(),
+    getAddButtonLabel: () => addButton.attr('aria-label'),
+    clickAddButton: () => (0, _unidriver.IconButtonUniDriver)(addButton, body).click()
+  };
+}
+var _default = exports.default = AddFieldColumnHeaderUniDriver;
+//# sourceMappingURL=AddFieldColumnHeader.uni.driver.js.map

package/dist/cjs/components/Table/AddFieldColumnHeader.uni.driver.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_unidriver","require","_unidriver2","AddFieldColumnHeaderUniDriver","base","body","bridge","$","addButton","baseUniDriverFactory","hoverTitle","mouse","moveTo","getSide","attr","addButtonExists","exists","getAddButtonLabel","clickAddButton","IconButtonUniDriver","click","_default","exports","default"],"sources":["../../../../src/components/Table/AddFieldColumnHeader.uni.driver.ts"],"sourcesContent":["import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\nimport { IconButtonUniDriver } from '@wix/design-system/dist/testkit/unidriver';\nimport { baseUniDriverFactory } from '../../unidriver';\n\nexport function AddFieldColumnHeaderUniDriver(\n  base: UniDriver,\n  body: UniDriver,\n) {\n  const bridge = body.$('[data-hook=\"add-field-column-header\"]');\n  const addButton = body.$('[data-hook=\"add-field-column-header-button\"]');\n\n  return {\n    ...baseUniDriverFactory(base),\n\n    /**\n     * Moves the pointer over the column title, which is what reveals the\n     * button. The border it lands on comes from where the pointer is across\n     * the title, so only a laid-out browser can produce a left one.\n     */\n    hoverTitle: () => base.mouse.moveTo(base),\n\n    /** The border the button sits on: \"left\" or \"right\". */\n    getSide: () => bridge.attr('data-side'),\n\n    addButtonExists: () => addButton.exists(),\n\n    getAddButtonLabel: () => addButton.attr('aria-label'),\n\n    clickAddButton: () => IconButtonUniDriver(addButton, body).click(),\n  };\n}\n\nexport default AddFieldColumnHeaderUniDriver;\n"],"mappings":";;;;;AACA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAEO,SAASE,6BAA6BA,CAC3CC,IAAe,EACfC,IAAe,EACf;EACA,MAAMC,MAAM,GAAGD,IAAI,CAACE,CAAC,CAAC,uCAAuC,CAAC;EAC9D,MAAMC,SAAS,GAAGH,IAAI,CAACE,CAAC,CAAC,8CAA8C,CAAC;EAExE,OAAO;IACL,GAAG,IAAAE,gCAAoB,EAACL,IAAI,CAAC;IAE7B;AACJ;AACA;AACA;AACA;IACIM,UAAU,EAAEA,CAAA,KAAMN,IAAI,CAACO,KAAK,CAACC,MAAM,CAACR,IAAI,CAAC;IAEzC;IACAS,OAAO,EAAEA,CAAA,KAAMP,MAAM,CAACQ,IAAI,CAAC,WAAW,CAAC;IAEvCC,eAAe,EAAEA,CAAA,KAAMP,SAAS,CAACQ,MAAM,CAAC,CAAC;IAEzCC,iBAAiB,EAAEA,CAAA,KAAMT,SAAS,CAACM,IAAI,CAAC,YAAY,CAAC;IAErDI,cAAc,EAAEA,CAAA,KAAM,IAAAC,8BAAmB,EAACX,SAAS,EAAEH,IAAI,CAAC,CAACe,KAAK,CAAC;EACnE,CAAC;AACH;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcpB,6BAA6B","ignoreList":[]}

package/dist/cjs/components/TabsFilter/TabsFilter.st.css.js

@@ -5,15 +5,15 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "TabsFilter560065561";
+var _namespace_ = "TabsFilter1621023237";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "TabsFilter560065561__root",
-  "titleBox": "TabsFilter560065561__titleBox"
+  "root": "TabsFilter1621023237__root",
+  "titleBox": "TabsFilter1621023237__titleBox"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/TabsFilter/TabsFilter.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/TabsFilter/TabsFilter.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"TabsFilter560065561\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"TabsFilter560065561__root\",\"titleBox\":\"TabsFilter560065561__titleBox\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,qBAAqB;AACvC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,2BAA2B;EAAC,UAAU,EAAC;AAA+B,CAAC;AAC7F,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/TabsFilter/TabsFilter.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"TabsFilter1621023237\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"TabsFilter1621023237__root\",\"titleBox\":\"TabsFilter1621023237__titleBox\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,sBAAsB;AACxC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,4BAA4B;EAAC,UAAU,EAAC;AAAgC,CAAC;AAC/F,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "ManageTagsModal17622325";
+var _namespace_ = "ManageTagsModal2882622398";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "ManageTagsModal17622325__root"
+  "root": "ManageTagsModal2882622398__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../../src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"ManageTagsModal17622325\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"ManageTagsModal17622325__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,yBAAyB;AAC3C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA+B,CAAC;AACtD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../../src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"ManageTagsModal2882622398\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"ManageTagsModal2882622398__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,2BAA2B;AAC7C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAiC,CAAC;AACxD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/ToolbarItem/ToolbarItem.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "ToolbarItem1298306547";
+var _namespace_ = "ToolbarItem1460566793";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "ToolbarItem1298306547__root"
+  "root": "ToolbarItem1460566793__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/ToolbarItem/ToolbarItem.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/ToolbarItem/ToolbarItem.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"ToolbarItem1298306547\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"ToolbarItem1298306547__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,uBAAuB;AACzC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA6B,CAAC;AACpD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/ToolbarItem/ToolbarItem.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"ToolbarItem1460566793\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"ToolbarItem1460566793__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,uBAAuB;AACzC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA6B,CAAC;AACpD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/ToolbarItemBox/ToolbarItemBox.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "ToolbarItemBox3970639897";
+var _namespace_ = "ToolbarItemBox3952381993";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "ToolbarItemBox3970639897__root"
+  "root": "ToolbarItemBox3952381993__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/ToolbarItemBox/ToolbarItemBox.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/ToolbarItemBox/ToolbarItemBox.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"ToolbarItemBox3970639897\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"ToolbarItemBox3970639897__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,0BAA0B;AAC5C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAgC,CAAC;AACvD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/ToolbarItemBox/ToolbarItemBox.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"ToolbarItemBox3952381993\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"ToolbarItemBox3952381993__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,0BAA0B;AAC5C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAgC,CAAC;AACvD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/common.st.css.js

@@ -5,16 +5,16 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "common1871939312";
+var _namespace_ = "common1675353889";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "common1871939312__root",
-  "column": "common1871939312__column",
-  "fullHeight": "common1871939312__fullHeight"
+  "root": "common1675353889__root",
+  "column": "common1675353889__column",
+  "fullHeight": "common1675353889__fullHeight"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/common.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../src/components/common.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"common1871939312\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"common1871939312__root\",\"column\":\"common1871939312__column\",\"fullHeight\":\"common1871939312__fullHeight\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,kBAAkB;AACpC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,wBAAwB;EAAC,QAAQ,EAAC,0BAA0B;EAAC,YAAY,EAAC;AAA8B,CAAC;AAC/H,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../src/components/common.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"common1675353889\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"common1675353889__root\",\"column\":\"common1675353889__column\",\"fullHeight\":\"common1675353889__fullHeight\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,kBAAkB;AACpC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,wBAAwB;EAAC,QAAQ,EAAC,0BAA0B;EAAC,YAAY,EAAC;AAA8B,CAAC;AAC/H,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/hooks/useCollectionTableResize.js

@@ -21,7 +21,12 @@ function useCollectionTableResize({
   const tableResizeProps = isResizable ? {
     ...userResizeProps,
     minColumnWidth: (userResizeProps == null ? void 0 : userResizeProps.minColumnWidth) ?? 74,
+    onColumnResizeStart(columnId, startWidth, event) {
+      columnSizesState == null || columnSizesState.setResizing(true);
+      userResizeProps == null || userResizeProps.onColumnResizeStart == null || userResizeProps.onColumnResizeStart(columnId, startWidth, event);
+    },
     onColumnResizeEnd(columnId, endWidth, event) {
+      columnSizesState == null || columnSizesState.setResizing(false);
       columnSizesState == null || columnSizesState.updateColumnWidth(columnId, Number(endWidth));
       userResizeProps == null || userResizeProps.onColumnResizeEnd == null || userResizeProps.onColumnResizeEnd(columnId, endWidth, event);
     }

package/dist/cjs/hooks/useCollectionTableResize.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_useIsMobile","useCollectionTableResize","columns","horizontalScroll","userResizeProps","columnSizesState","isVirtualized","forceResize","isMobile","useIsMobile","areAllColumnsPixelWidth","useMemo","every","col","_col$width","width","toString","match","isResizable","tableResizeProps","minColumnWidth","onColumnResizeEnd","columnId","endWidth","event","updateColumnWidth","Number","undefined"],"sources":["../../../src/hooks/useCollectionTableResize.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useIsMobile } from './useIsMobile';\nimport { TableProps, TableColumn } from '@wix/design-system';\nimport { ColumnSizesState } from '../state/ColumnSizesState';\n\nexport function useCollectionTableResize({\n  columns,\n  horizontalScroll,\n  userResizeProps,\n  columnSizesState,\n  isVirtualized,\n  forceResize,\n}: {\n  columns: TableColumn[];\n  horizontalScroll: boolean | undefined;\n  userResizeProps?: TableProps['resizeProps'];\n  columnSizesState: ColumnSizesState | null;\n  isVirtualized?: boolean;\n  forceResize?: boolean;\n}) {\n  const isMobile = useIsMobile();\n\n  const areAllColumnsPixelWidth = useMemo(\n    () => columns.every((col) => col.width?.toString().match(/^\\d+px$/)),\n    [columns],\n  );\n\n  const isResizable =\n    forceResize ||\n    (!isMobile &&\n      !isVirtualized &&\n      !!horizontalScroll &&\n      areAllColumnsPixelWidth);\n\n  const tableResizeProps: TableProps['resizeProps'] | undefined = isResizable\n    ? {\n        ...userResizeProps,\n        minColumnWidth: userResizeProps?.minColumnWidth ?? 74,\n        onColumnResizeEnd(columnId, endWidth, event) {\n          columnSizesState?.updateColumnWidth(columnId, Number(endWidth));\n          userResizeProps?.onColumnResizeEnd?.(columnId, endWidth, event);\n        },\n      }\n    : undefined;\n\n  return {\n    isResizable,\n    tableResizeProps,\n  };\n}\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAIO,SAASE,wBAAwBA,CAAC;EACvCC,OAAO;EACPC,gBAAgB;EAChBC,eAAe;EACfC,gBAAgB;EAChBC,aAAa;EACbC;AAQF,CAAC,EAAE;EACD,MAAMC,QAAQ,GAAG,IAAAC,wBAAW,EAAC,CAAC;EAE9B,MAAMC,uBAAuB,GAAG,IAAAC,cAAO,EACrC,MAAMT,OAAO,CAACU,KAAK,CAAEC,GAAG;IAAA,IAAAC,UAAA;IAAA,QAAAA,UAAA,GAAKD,GAAG,CAACE,KAAK,qBAATD,UAAA,CAAWE,QAAQ,CAAC,CAAC,CAACC,KAAK,CAAC,SAAS,CAAC;EAAA,EAAC,EACpE,CAACf,OAAO,CACV,CAAC;EAED,MAAMgB,WAAW,GACfX,WAAW,IACV,CAACC,QAAQ,IACR,CAACF,aAAa,IACd,CAAC,CAACH,gBAAgB,IAClBO,uBAAwB;EAE5B,MAAMS,gBAAuD,GAAGD,WAAW,GACvE;IACE,GAAGd,eAAe;IAClBgB,cAAc,EAAE,CAAAhB,eAAe,oBAAfA,eAAe,CAAEgB,cAAc,KAAI,EAAE;IACrDC,iBAAiBA,CAACC,QAAQ,EAAEC,QAAQ,EAAEC,KAAK,EAAE;MAC3CnB,gBAAgB,YAAhBA,gBAAgB,CAAEoB,iBAAiB,CAACH,QAAQ,EAAEI,MAAM,CAACH,QAAQ,CAAC,CAAC;MAC/DnB,eAAe,YAAfA,eAAe,CAAEiB,iBAAiB,YAAlCjB,eAAe,CAAEiB,iBAAiB,CAAGC,QAAQ,EAAEC,QAAQ,EAAEC,KAAK,CAAC;IACjE;EACF,CAAC,GACDG,SAAS;EAEb,OAAO;IACLT,WAAW;IACXC;EACF,CAAC;AACH","ignoreList":[]}
+{"version":3,"names":["_react","require","_useIsMobile","useCollectionTableResize","columns","horizontalScroll","userResizeProps","columnSizesState","isVirtualized","forceResize","isMobile","useIsMobile","areAllColumnsPixelWidth","useMemo","every","col","_col$width","width","toString","match","isResizable","tableResizeProps","minColumnWidth","onColumnResizeStart","columnId","startWidth","event","setResizing","onColumnResizeEnd","endWidth","updateColumnWidth","Number","undefined"],"sources":["../../../src/hooks/useCollectionTableResize.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useIsMobile } from './useIsMobile';\nimport { TableProps, TableColumn } from '@wix/design-system';\nimport { ColumnSizesState } from '../state/ColumnSizesState';\n\nexport function useCollectionTableResize({\n  columns,\n  horizontalScroll,\n  userResizeProps,\n  columnSizesState,\n  isVirtualized,\n  forceResize,\n}: {\n  columns: TableColumn[];\n  horizontalScroll: boolean | undefined;\n  userResizeProps?: TableProps['resizeProps'];\n  columnSizesState: ColumnSizesState | null;\n  isVirtualized?: boolean;\n  forceResize?: boolean;\n}) {\n  const isMobile = useIsMobile();\n\n  const areAllColumnsPixelWidth = useMemo(\n    () => columns.every((col) => col.width?.toString().match(/^\\d+px$/)),\n    [columns],\n  );\n\n  const isResizable =\n    forceResize ||\n    (!isMobile &&\n      !isVirtualized &&\n      !!horizontalScroll &&\n      areAllColumnsPixelWidth);\n\n  const tableResizeProps: TableProps['resizeProps'] | undefined = isResizable\n    ? {\n        ...userResizeProps,\n        minColumnWidth: userResizeProps?.minColumnWidth ?? 74,\n        onColumnResizeStart(columnId, startWidth, event) {\n          columnSizesState?.setResizing(true);\n          userResizeProps?.onColumnResizeStart?.(columnId, startWidth, event);\n        },\n        onColumnResizeEnd(columnId, endWidth, event) {\n          columnSizesState?.setResizing(false);\n          columnSizesState?.updateColumnWidth(columnId, Number(endWidth));\n          userResizeProps?.onColumnResizeEnd?.(columnId, endWidth, event);\n        },\n      }\n    : undefined;\n\n  return {\n    isResizable,\n    tableResizeProps,\n  };\n}\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAIO,SAASE,wBAAwBA,CAAC;EACvCC,OAAO;EACPC,gBAAgB;EAChBC,eAAe;EACfC,gBAAgB;EAChBC,aAAa;EACbC;AAQF,CAAC,EAAE;EACD,MAAMC,QAAQ,GAAG,IAAAC,wBAAW,EAAC,CAAC;EAE9B,MAAMC,uBAAuB,GAAG,IAAAC,cAAO,EACrC,MAAMT,OAAO,CAACU,KAAK,CAAEC,GAAG;IAAA,IAAAC,UAAA;IAAA,QAAAA,UAAA,GAAKD,GAAG,CAACE,KAAK,qBAATD,UAAA,CAAWE,QAAQ,CAAC,CAAC,CAACC,KAAK,CAAC,SAAS,CAAC;EAAA,EAAC,EACpE,CAACf,OAAO,CACV,CAAC;EAED,MAAMgB,WAAW,GACfX,WAAW,IACV,CAACC,QAAQ,IACR,CAACF,aAAa,IACd,CAAC,CAACH,gBAAgB,IAClBO,uBAAwB;EAE5B,MAAMS,gBAAuD,GAAGD,WAAW,GACvE;IACE,GAAGd,eAAe;IAClBgB,cAAc,EAAE,CAAAhB,eAAe,oBAAfA,eAAe,CAAEgB,cAAc,KAAI,EAAE;IACrDC,mBAAmBA,CAACC,QAAQ,EAAEC,UAAU,EAAEC,KAAK,EAAE;MAC/CnB,gBAAgB,YAAhBA,gBAAgB,CAAEoB,WAAW,CAAC,IAAI,CAAC;MACnCrB,eAAe,YAAfA,eAAe,CAAEiB,mBAAmB,YAApCjB,eAAe,CAAEiB,mBAAmB,CAAGC,QAAQ,EAAEC,UAAU,EAAEC,KAAK,CAAC;IACrE,CAAC;IACDE,iBAAiBA,CAACJ,QAAQ,EAAEK,QAAQ,EAAEH,KAAK,EAAE;MAC3CnB,gBAAgB,YAAhBA,gBAAgB,CAAEoB,WAAW,CAAC,KAAK,CAAC;MACpCpB,gBAAgB,YAAhBA,gBAAgB,CAAEuB,iBAAiB,CAACN,QAAQ,EAAEO,MAAM,CAACF,QAAQ,CAAC,CAAC;MAC/DvB,eAAe,YAAfA,eAAe,CAAEsB,iBAAiB,YAAlCtB,eAAe,CAAEsB,iBAAiB,CAAGJ,QAAQ,EAAEK,QAAQ,EAAEH,KAAK,CAAC;IACjE;EACF,CAAC,GACDM,SAAS;EAEb,OAAO;IACLZ,WAAW;IACXC;EACF,CAAC;AACH","ignoreList":[]}

package/dist/cjs/hooks/useCreateWSRColumnBase.js

@@ -72,11 +72,12 @@ function useCreateWSRColumnBase({
       }
     }, title) : title) : title;
     const hasTitleText = typeof title === 'string' ? title.trim().length > 0 : Boolean(title);
-    const wrapWithAddField = showAddFieldButton && id !== 'avatar' && hasTitleText;
+    const wrapWithAddField = showAddFieldButton && id != null && id !== 'avatar' && hasTitleText;
     return {
       id,
       key: id ?? index,
       title: wrapWithAddField ? /*#__PURE__*/_react.default.createElement(_AddFieldColumnHeader.AddFieldColumnHeader, {
+        columnId: id,
         __self: this,
         __source: {
           fileName: _jsxFileName,