@wix/patterns 0.8.0

package/dist/cjs/components/CollectionToolbar/ReorderModeToolbar.js

@@ -0,0 +1,160 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.ReorderModeToolbarBase = exports.ReorderModeToolbar = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _mobxReactLite = require("mobx-react-lite");
+var _designSystem = require("@wix/design-system");
+var _react2 = require("@wix/bex-core/react");
+var _ToolbarCollectionContext = require("../ToolbarCollectionContext");
+var _initReordeModeState = require("../DragAndDrop/initReordeModeState");
+var _ReorderModeDiscardChangesModal = require("./ReorderModeDiscardChangesModal");
+var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/CollectionToolbar/ReorderModeToolbar.tsx";
+function _ReorderModeToolbar(props) {
+  const {
+    learnMoreUrl,
+    reorderModeTitle,
+    state
+  } = props;
+  const {
+    translate: t
+  } = (0, _react2.useWixPatternsContainer)();
+  if (!state.reorderModeState) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar, {
+    removeVerticalPadding: true,
+    dataHook: "reorder-mode-toolbar",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 39,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar.ItemGroup, {
+    position: "start",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 40,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar.Item, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 41,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    gap: "SP1",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 42,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    size: "small",
+    dataHook: "reorder-mode-toolbar-title",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 43,
+      columnNumber: 13
+    }
+  }, reorderModeTitle || t('cairo.dragAndDrop.reorderMode.toolbar.title')), learnMoreUrl ? /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
+    dataHook: "reorder-mode-toolbar-learn-more-cta",
+    underline: "always",
+    size: "small",
+    as: "a",
+    rel: "noopener",
+    target: "_blank",
+    href: learnMoreUrl,
+    onClick: () => {
+      var _state$reorderModeSta;
+      return (_state$reorderModeSta = state.reorderModeState) == null ? void 0 : _state$reorderModeSta.reportLearnMoreClickedBiEvent();
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 48,
+      columnNumber: 15
+    }
+  }, t('cairo.dragAndDrop.reorderMode.toolbar.title.learnMore')) : undefined))), /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar.ItemGroup, {
+    position: "end",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 66,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar.Item, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 67,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Button, {
+    dataHook: "reorder-mode-toolbar-cancel-cta",
+    priority: "secondary",
+    onClick: () => {
+      var _state$reorderModeSta2;
+      (_state$reorderModeSta2 = state.reorderModeState) == null || _state$reorderModeSta2.onBulkCancel();
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 68,
+      columnNumber: 11
+    }
+  }, t('cairo.dragAndDrop.reorderMode.toolbar.cancel.cta')), /*#__PURE__*/_react.default.createElement(_ReorderModeDiscardChangesModal.ReorderModeDiscardChangesModal, {
+    state: state.reorderModeState,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 77,
+      columnNumber: 11
+    }
+  })), /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar.Item, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 79,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Button, {
+    dataHook: "reorder-mode-toolbar-save-cta",
+    onClick: () => {
+      var _state$reorderModeSta3;
+      (_state$reorderModeSta3 = state.reorderModeState) == null || _state$reorderModeSta3.onBulkSubmit();
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 80,
+      columnNumber: 11
+    }
+  }, t('cairo.dragAndDrop.reorderMode.toolbar.save.cta')))));
+}
+const ReorderModeToolbarBase = exports.ReorderModeToolbarBase = (0, _mobxReactLite.observer)(_ReorderModeToolbar);
+const ReorderModeToolbar = props => {
+  const state = (0, _ToolbarCollectionContext.useToolbarCollectionContext)();
+  return /*#__PURE__*/_react.default.createElement(ReorderModeToolbarBase, (0, _extends2.default)({
+    state: state
+  }, props, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 101,
+      columnNumber: 10
+    }
+  }));
+};
+exports.ReorderModeToolbar = ReorderModeToolbar;
+ReorderModeToolbar.displayName = 'ReorderModeToolbar';
+ReorderModeToolbar.setReorderModeState = _initReordeModeState.setReorderModeState;
+//# sourceMappingURL=ReorderModeToolbar.js.map

package/dist/cjs/components/CollectionToolbar/ReorderModeToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_designSystem","_react2","_ToolbarCollectionContext","_initReordeModeState","_ReorderModeDiscardChangesModal","_jsxFileName","_ReorderModeToolbar","props","learnMoreUrl","reorderModeTitle","state","translate","t","useWixPatternsContainer","reorderModeState","default","createElement","TableToolbar","removeVerticalPadding","dataHook","__self","__source","fileName","lineNumber","columnNumber","ItemGroup","position","Item","Box","gap","Text","size","TextButton","underline","as","rel","target","href","onClick","_state$reorderModeSta","reportLearnMoreClickedBiEvent","undefined","Button","priority","_state$reorderModeSta2","onBulkCancel","ReorderModeDiscardChangesModal","_state$reorderModeSta3","onBulkSubmit","ReorderModeToolbarBase","exports","observer","ReorderModeToolbar","useToolbarCollectionContext","_extends2","displayName","setReorderModeState"],"sources":["../../../../src/components/CollectionToolbar/ReorderModeToolbar.tsx"],"sourcesContent":["import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport {\n  Box,\n  Button,\n  Text,\n  TextButton,\n  TableToolbar,\n} from '@wix/design-system';\nimport { FiltersMap } from '@wix/bex-core';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { ToolbarCollectionState } from '../../state';\nimport { useToolbarCollectionContext } from '../ToolbarCollectionContext';\nimport { setReorderModeState } from '../DragAndDrop/initReordeModeState';\nimport { ReorderModeDiscardChangesModal } from './ReorderModeDiscardChangesModal';\n\nexport interface ReorderModeToolbarBaseProps {\n  learnMoreUrl?: string;\n  reorderModeTitle?: string;\n}\n\nexport interface ReorderModeToolbarProps<T, F extends FiltersMap>\n  extends ReorderModeToolbarBaseProps {\n  state: ToolbarCollectionState<T, F>;\n}\n\nfunction _ReorderModeToolbar<T, F extends FiltersMap>(\n  props: ReorderModeToolbarProps<T, F>,\n) {\n  const { learnMoreUrl, reorderModeTitle, state } = props;\n\n  const { translate: t } = useWixPatternsContainer();\n\n  if (!state.reorderModeState) {\n    return null;\n  }\n\n  return (\n    <TableToolbar removeVerticalPadding dataHook=\"reorder-mode-toolbar\">\n      <TableToolbar.ItemGroup position=\"start\">\n        <TableToolbar.Item>\n          <Box gap=\"SP1\">\n            <Text size=\"small\" dataHook=\"reorder-mode-toolbar-title\">\n              {reorderModeTitle ||\n                t('cairo.dragAndDrop.reorderMode.toolbar.title')}\n            </Text>\n            {learnMoreUrl ? (\n              <TextButton\n                dataHook=\"reorder-mode-toolbar-learn-more-cta\"\n                underline=\"always\"\n                size=\"small\"\n                as=\"a\"\n                rel=\"noopener\"\n                target=\"_blank\"\n                href={learnMoreUrl}\n                onClick={() =>\n                  state.reorderModeState?.reportLearnMoreClickedBiEvent()\n                }\n              >\n                {t('cairo.dragAndDrop.reorderMode.toolbar.title.learnMore')}\n              </TextButton>\n            ) : undefined}\n          </Box>\n        </TableToolbar.Item>\n      </TableToolbar.ItemGroup>\n      <TableToolbar.ItemGroup position=\"end\">\n        <TableToolbar.Item>\n          <Button\n            dataHook=\"reorder-mode-toolbar-cancel-cta\"\n            priority=\"secondary\"\n            onClick={() => {\n              state.reorderModeState?.onBulkCancel();\n            }}\n          >\n            {t('cairo.dragAndDrop.reorderMode.toolbar.cancel.cta')}\n          </Button>\n          <ReorderModeDiscardChangesModal state={state.reorderModeState} />\n        </TableToolbar.Item>\n        <TableToolbar.Item>\n          <Button\n            dataHook=\"reorder-mode-toolbar-save-cta\"\n            onClick={() => {\n              state.reorderModeState?.onBulkSubmit();\n            }}\n          >\n            {t('cairo.dragAndDrop.reorderMode.toolbar.save.cta')}\n          </Button>\n        </TableToolbar.Item>\n      </TableToolbar.ItemGroup>\n    </TableToolbar>\n  );\n}\n\nexport const ReorderModeToolbarBase = observer(_ReorderModeToolbar);\n\nexport const ReorderModeToolbar = <T, F extends FiltersMap>(\n  props: ReorderModeToolbarBaseProps,\n) => {\n  const state = useToolbarCollectionContext<T, F>();\n\n  return <ReorderModeToolbarBase state={state} {...props} />;\n};\n\nReorderModeToolbar.displayName = 'ReorderModeToolbar';\nReorderModeToolbar.setReorderModeState = setReorderModeState;\n"],"mappings":"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"}

package/dist/cjs/components/CollectionToolbar/ReorderModeToolbar.uni.driver.js

@@ -0,0 +1,19 @@
+"use strict";
+
+exports.__esModule = true;
+exports.ReorderModeToolbarUniDriver = void 0;
+var _unidriver = require("../../unidriver");
+var _unidriver2 = require("@wix/design-system/dist/testkit/unidriver");
+const ReorderModeToolbarUniDriver = (base, body) => {
+  const toolbar = (0, _unidriver.baseUniDriverFactory)(base);
+  return {
+    ...toolbar,
+    getTitle: () => base.$('[data-hook="reorder-mode-toolbar-title"]'),
+    getLearnMoreBtn: () => (0, _unidriver2.TextButtonUniDriver)(base.$('[data-hook="reorder-mode-toolbar-learn-more-cta"]'), body),
+    getCancelButton: () => (0, _unidriver2.ButtonUniDriver)(base.$('[data-hook="reorder-mode-toolbar-cancel-cta"]'), body),
+    getSaveButton: () => (0, _unidriver2.ButtonUniDriver)(base.$('[data-hook="reorder-mode-toolbar-save-cta"]'), body),
+    getCancelModal: () => (0, _unidriver2.MessageModalLayoutUniDriver)(body.$('[data-hook="reorder-mode-discard-changes-modal"]'), body)
+  };
+};
+exports.ReorderModeToolbarUniDriver = ReorderModeToolbarUniDriver;
+//# sourceMappingURL=ReorderModeToolbar.uni.driver.js.map

package/dist/cjs/components/CollectionToolbar/ReorderModeToolbar.uni.driver.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_unidriver","require","_unidriver2","ReorderModeToolbarUniDriver","base","body","toolbar","baseUniDriverFactory","getTitle","$","getLearnMoreBtn","TextButtonUniDriver","getCancelButton","ButtonUniDriver","getSaveButton","getCancelModal","MessageModalLayoutUniDriver","exports"],"sources":["../../../../src/components/CollectionToolbar/ReorderModeToolbar.uni.driver.ts"],"sourcesContent":["import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\nimport { baseUniDriverFactory } from '../../unidriver';\nimport {\n  ButtonUniDriver,\n  MessageModalLayoutUniDriver,\n  TextButtonUniDriver,\n} from '@wix/design-system/dist/testkit/unidriver';\n\nexport const ReorderModeToolbarUniDriver = (\n  base: UniDriver,\n  body: UniDriver,\n) => {\n  const toolbar = baseUniDriverFactory(base);\n\n  return {\n    ...toolbar,\n    getTitle: () => base.$('[data-hook=\"reorder-mode-toolbar-title\"]'),\n    getLearnMoreBtn: () =>\n      TextButtonUniDriver(\n        base.$('[data-hook=\"reorder-mode-toolbar-learn-more-cta\"]'),\n        body,\n      ),\n    getCancelButton: () =>\n      ButtonUniDriver(\n        base.$('[data-hook=\"reorder-mode-toolbar-cancel-cta\"]'),\n        body,\n      ),\n    getSaveButton: () =>\n      ButtonUniDriver(\n        base.$('[data-hook=\"reorder-mode-toolbar-save-cta\"]'),\n        body,\n      ),\n    getCancelModal: () =>\n      MessageModalLayoutUniDriver(\n        body.$('[data-hook=\"reorder-mode-discard-changes-modal\"]'),\n        body,\n      ),\n  };\n};\n"],"mappings":";;;;AACA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAMO,MAAME,2BAA2B,GAAGA,CACzCC,IAAe,EACfC,IAAe,KACZ;EACH,MAAMC,OAAO,GAAG,IAAAC,+BAAoB,EAACH,IAAI,CAAC;EAE1C,OAAO;IACL,GAAGE,OAAO;IACVE,QAAQ,EAAEA,CAAA,KAAMJ,IAAI,CAACK,CAAC,CAAC,0CAA0C,CAAC;IAClEC,eAAe,EAAEA,CAAA,KACf,IAAAC,+BAAmB,EACjBP,IAAI,CAACK,CAAC,CAAC,mDAAmD,CAAC,EAC3DJ,IACF,CAAC;IACHO,eAAe,EAAEA,CAAA,KACf,IAAAC,2BAAe,EACbT,IAAI,CAACK,CAAC,CAAC,+CAA+C,CAAC,EACvDJ,IACF,CAAC;IACHS,aAAa,EAAEA,CAAA,KACb,IAAAD,2BAAe,EACbT,IAAI,CAACK,CAAC,CAAC,6CAA6C,CAAC,EACrDJ,IACF,CAAC;IACHU,cAAc,EAAEA,CAAA,KACd,IAAAC,uCAA2B,EACzBX,IAAI,CAACI,CAAC,CAAC,kDAAkD,CAAC,EAC1DJ,IACF;EACJ,CAAC;AACH,CAAC;AAACY,OAAA,CAAAd,2BAAA,GAAAA,2BAAA"}

package/dist/cjs/components/CollectionToolbar/SearchOrCustomFilter.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SearchOrCustomFilter = SearchOrCustomFilter;
+var _designSystem = require("@wix/design-system");
+var _CollectionSearch = require("../CollectionSearch");
+var _react = _interopRequireDefault(require("react"));
+var _SearchOrCustomFilterStCss = require("./SearchOrCustomFilter.st.css.js");
+var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/CollectionToolbar/SearchOrCustomFilter.tsx";
+function SearchOrCustomFilter(props) {
+  const {
+    search
+  } = props;
+  let child;
+  if (search === true) {
+    child = /*#__PURE__*/_react.default.createElement(_CollectionSearch.CollectionSearch, {
+      size: "small",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 17,
+        columnNumber: 13
+      }
+    });
+  } else {
+    child = search;
+  }
+  return /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar.Item, {
+    className: (0, _SearchOrCustomFilterStCss.st)(_SearchOrCustomFilterStCss.classes.search),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 23,
+      columnNumber: 5
+    }
+  }, child);
+}
+//# sourceMappingURL=SearchOrCustomFilter.js.map

package/dist/cjs/components/CollectionToolbar/SearchOrCustomFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_designSystem","require","_CollectionSearch","_react","_interopRequireDefault","_SearchOrCustomFilterStCss","_jsxFileName","SearchOrCustomFilter","props","search","child","default","createElement","CollectionSearch","size","__self","__source","fileName","lineNumber","columnNumber","TableToolbar","Item","className","st","classes"],"sources":["../../../../src/components/CollectionToolbar/SearchOrCustomFilter.tsx"],"sourcesContent":["import { TableToolbar } from '@wix/design-system';\nimport { CollectionSearch } from '../CollectionSearch';\nimport React from 'react';\nimport { classes, st } from './SearchOrCustomFilter.st.css.js';\nimport { ToolbarBaseProps } from '../ToolbarCollection';\n\nexport interface SearchOrCustomFilterProps<T> {\n  search: ToolbarBaseProps<T>['search'];\n}\n\nexport function SearchOrCustomFilter<T>(props: SearchOrCustomFilterProps<T>) {\n  const { search } = props;\n\n  let child;\n\n  if (search === true) {\n    child = <CollectionSearch size=\"small\" />;\n  } else {\n    child = search;\n  }\n\n  return (\n    <TableToolbar.Item className={st(classes.search)}>\n      {child}\n    </TableToolbar.Item>\n  );\n}\n"],"mappings":";;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,0BAAA,GAAAJ,OAAA;AAA+D,IAAAK,YAAA;AAOxD,SAASC,oBAAoBA,CAAIC,KAAmC,EAAE;EAC3E,MAAM;IAAEC;EAAO,CAAC,GAAGD,KAAK;EAExB,IAAIE,KAAK;EAET,IAAID,MAAM,KAAK,IAAI,EAAE;IACnBC,KAAK,gBAAGP,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACV,iBAAA,CAAAW,gBAAgB;MAACC,IAAI,EAAC,OAAO;MAAAC,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAX,YAAA;QAAAY,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CAAC;EAC3C,CAAC,MAAM;IACLT,KAAK,GAAGD,MAAM;EAChB;EAEA,oBACEN,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACZ,aAAA,CAAAoB,YAAY,CAACC,IAAI;IAACC,SAAS,EAAE,IAAAC,6BAAE,EAACC,kCAAO,CAACf,MAAM,CAAE;IAAAM,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAX,YAAA;MAAAY,UAAA;MAAAC,YAAA;IAAA;EAAA,GAC9CT,KACgB,CAAC;AAExB"}

package/dist/cjs/components/CollectionToolbar/SearchOrCustomFilter.st.css

@@ -0,0 +1,5 @@
+.search {
+  min-width: 140px;
+  max-width: 240px;
+  flex: 1 0;
+}

package/dist/cjs/components/CollectionToolbar/SearchOrCustomFilter.st.css.js

@@ -0,0 +1,23 @@
+"use strict";
+
+exports.__esModule = true;
+exports.vars = exports.style = exports.stVars = exports.st = exports.namespace = exports.layers = exports.keyframes = exports.cssStates = exports.containers = exports.classes = void 0;
+var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
+// @ts-nocheck
+
+var _namespace_ = "SearchOrCustomFilter2124569678";
+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": "SearchOrCustomFilter2124569678__root",
+  "search": "SearchOrCustomFilter2124569678__search"
+};
+var keyframes = exports.keyframes = {};
+var layers = exports.layers = {};
+var containers = exports.containers = {};
+var stVars = exports.stVars = {};
+var vars = exports.vars = {};
+//# sourceMappingURL=SearchOrCustomFilter.st.css.js.map

package/dist/cjs/components/CollectionToolbar/SearchOrCustomFilter.st.css.js.map

@@ -0,0 +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/CollectionToolbar/SearchOrCustomFilter.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"SearchOrCustomFilter2124569678\";\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\":\"SearchOrCustomFilter2124569678__root\",\"search\":\"SearchOrCustomFilter2124569678__search\"};\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,QAAQ,EAAC;AAAwC,CAAC;AAC/G,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"}

package/dist/cjs/components/CollectionToolbar/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+exports.__esModule = true;
+var _CollectionToolbar = require("./CollectionToolbar");
+Object.keys(_CollectionToolbar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CollectionToolbar[key]) return;
+  exports[key] = _CollectionToolbar[key];
+});
+var _PrimaryActionButton = require("./PrimaryActionButton");
+Object.keys(_PrimaryActionButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PrimaryActionButton[key]) return;
+  exports[key] = _PrimaryActionButton[key];
+});
+var _ReorderModeToolbar = require("./ReorderModeToolbar");
+Object.keys(_ReorderModeToolbar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ReorderModeToolbar[key]) return;
+  exports[key] = _ReorderModeToolbar[key];
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/CollectionToolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_CollectionToolbar","require","Object","keys","forEach","key","exports","_PrimaryActionButton","_ReorderModeToolbar"],"sources":["../../../../src/components/CollectionToolbar/index.ts"],"sourcesContent":["export * from './CollectionToolbar';\nexport * from './PrimaryActionButton';\nexport * from './ReorderModeToolbar';\n"],"mappings":";;;AAAA,IAAAA,kBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,kBAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,kBAAA,CAAAK,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAL,kBAAA,CAAAK,GAAA;AAAA;AACA,IAAAE,oBAAA,GAAAN,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAI,oBAAA,EAAAH,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAE,oBAAA,CAAAF,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAE,oBAAA,CAAAF,GAAA;AAAA;AACA,IAAAG,mBAAA,GAAAP,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAK,mBAAA,EAAAJ,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAG,mBAAA,CAAAH,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAG,mBAAA,CAAAH,GAAA;AAAA"}

package/dist/cjs/components/CollectionToolbarFilters/CollectionToolbarFilters.js

@@ -0,0 +1,201 @@
+"use strict";
+
+exports.__esModule = true;
+exports.CollectionToolbarFilters = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _useFiltersLayout = require("./useFiltersLayout");
+var _ToolbarCollectionContext = require("../ToolbarCollectionContext");
+var _AppliedFiltersTagList = require("../AppliedFiltersTagList");
+var _mobxReactLite = require("mobx-react-lite");
+var _ToolbarItemBox = require("../ToolbarItemBox");
+var _AppliedFiltersTagListState = require("../AppliedFiltersTagList/AppliedFiltersTagListState");
+var _CollectionToolbarFiltersState = require("./CollectionToolbarFiltersState");
+var _CollectionFilter = require("../CollectionFilter");
+var _FiltersPanelSidePanelEntry = require("./FiltersPanelSidePanelEntry");
+var _MoreFiltersCTA = require("../MoreFiltersCTA");
+var _react2 = require("@wix/bex-core/react");
+var _useFiltersSyncProps = require("./useFiltersSyncProps");
+var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/CollectionToolbarFilters/CollectionToolbarFilters.tsx";
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _CollectionToolbarFilters(props) {
+  const {
+    children,
+    inline,
+    maxInlineFilters,
+    maxInlineLabels,
+    panelTitle,
+    onPanelClearButtonClicked,
+    onSearchAppliedFilterTagRemove,
+    onSubToolbarClearButtonClicked,
+    hideAppliedFiltersTagList,
+    useNewFilters
+  } = props;
+  const childrenArr = (0, _useFiltersSyncProps.useFiltersSyncProps)(children);
+  const state = (0, _ToolbarCollectionContext.useToolbarCollectionContext)();
+  const [toolbarFiltersState] = (0, _react.useState)(() => {
+    state.toolbarFiltersState ?? (state.toolbarFiltersState = new _CollectionToolbarFiltersState.CollectionToolbarFiltersState({
+      toolbar: state
+    }));
+    state.setToolbarFiltersStateInitialized(true);
+    return state.toolbarFiltersState;
+  });
+  (0, _react.useEffect)(() => {
+    state.panels.registerSidePanel('filters', _FiltersPanelSidePanelEntry.FiltersPanelSidePanelEntry);
+  }, []);
+  (0, _react.useEffect)(() => {
+    toolbarFiltersState.onClearButtonClicked = onPanelClearButtonClicked;
+  }, [onPanelClearButtonClicked]);
+  const forceShowSidePanel = (0, _react.useMemo)(() => !!childrenArr.find(filter => {
+    return filter.type.displayName && ['DateRangeFilter', 'MultiSelectCollectionFilter'].includes(filter.type.displayName);
+  }), [childrenArr]);
+  const {
+    viewsProps,
+    collection
+  } = state;
+  const customInlineElements = viewsProps ? 1 : 0;
+  const {
+    showFiltersPanelButton,
+    totalInlineFilters,
+    showLabels
+  } = (0, _useFiltersLayout.useFiltersLayout)({
+    useNewFilters,
+    filters: childrenArr.length,
+    totalFilters: childrenArr.length + customInlineElements,
+    inline,
+    maxInlineFilters,
+    maxInlineLabels,
+    customInlineElements,
+    forceShowSidePanel
+  });
+  (0, _react.useEffect)(() => {
+    toolbarFiltersState.panelTitle.set(panelTitle);
+  }, [panelTitle]);
+  (0, _react.useEffect)(() => {
+    toolbarFiltersState.totalInlineFilters.set(totalInlineFilters);
+  }, [totalInlineFilters]);
+  (0, _react.useEffect)(() => {
+    toolbarFiltersState.filterElements.set(childrenArr);
+  }, [childrenArr]);
+  const container = (0, _react2.useWixPatternsContainer)();
+  const {
+    filters
+  } = collection;
+  const filtersProps = (0, _react.useMemo)(() => {
+    // share essential filter props globally
+    return [...childrenArr.map(({
+      props: filterChildProps,
+      type
+    }) => {
+      const {
+        filter,
+        onAppliedFilterTagRemove,
+        renderToolbarTag
+      } = filterChildProps;
+      return {
+        filter,
+        onAppliedFilterTagRemove,
+        renderToolbarTag: renderToolbarTag ?? (type.renderPresetToolbarTag == null ? void 0 : type.renderPresetToolbarTag(container))
+      };
+    }), {
+      filter: filters.search,
+      onAppliedFilterTagRemove: onSearchAppliedFilterTagRemove
+    }];
+  }, childrenArr.map(({
+    props: {
+      filter
+    }
+  }) => filter));
+  (0, _react.useEffect)(() => {
+    state.setFilterTagsPropsIfChanged(filtersProps);
+    return () => {
+      state.setFilterTagsPropsIfChanged(null);
+    };
+  }, [filtersProps]);
+  (0, _react.useEffect)(() => {
+    if (showFiltersPanelButton) {
+      state.featuredComponents.moreFiltersButton.set(() => /*#__PURE__*/_react.default.createElement(_MoreFiltersCTA.MoreFiltersCTA, {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 170,
+          columnNumber: 60
+        }
+      }));
+      return () => {
+        state.featuredComponents.moreFiltersButton.set(null);
+      };
+    }
+    state.featuredComponents.moreFiltersButton.set(null);
+    return;
+  }, [showFiltersPanelButton]);
+  const [tagListState] = (0, _react.useState)(() => new _AppliedFiltersTagListState.AppliedFiltersTagListState({
+    table: state
+  }));
+  (0, _react.useEffect)(() => {
+    const disposers = [tagListState.init()];
+    if (hideAppliedFiltersTagList) {
+      state.featuredComponents.appliedFiltersTagList.set(null);
+    } else {
+      state.featuredComponents.appliedFiltersTagList.set({
+        state: tagListState,
+        component: () => /*#__PURE__*/_react.default.createElement(_AppliedFiltersTagList.AppliedFiltersTagList, {
+          state: tagListState,
+          onClearButtonClicked: onSubToolbarClearButtonClicked,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 195,
+            columnNumber: 11
+          }
+        })
+      });
+    }
+    return () => {
+      disposers.forEach(d => d());
+      state.featuredComponents.appliedFiltersTagList.set(null);
+    };
+  }, [hideAppliedFiltersTagList]);
+  return (
+    /*#__PURE__*/
+    // workaround to support bad enzyme version not detecting this as a valid fragment component
+    // https://wix.slack.com/archives/C02K83200PL/p1671962461443749
+    _react.default.createElement(_react.Fragment, {
+      key: "toolbar-items",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 212,
+        columnNumber: 5
+      }
+    }, childrenArr.slice(0, totalInlineFilters).map((element, index) => {
+      var _filterProps$toolbarI;
+      const {
+        props: filterProps
+      } = element;
+      return /*#__PURE__*/_react.default.createElement(_ToolbarItemBox.ToolbarItemBox, {
+        key: index,
+        layout: filterProps.layout,
+        dataHook: `toolbar-item-filter-${index}`,
+        label: showLabels && ((_filterProps$toolbarI = filterProps.toolbarItemProps) == null ? void 0 : _filterProps$toolbarI.label),
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 217,
+          columnNumber: 11
+        }
+      }, filterProps.filter ? /*#__PURE__*/_react.default.createElement(_CollectionFilter.CollectionFilter, {
+        filter: filterProps.filter,
+        state: toolbarFiltersState,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 224,
+          columnNumber: 15
+        }
+      }, element) : element);
+    }))
+  );
+}
+const CollectionToolbarFilters = exports.CollectionToolbarFilters = (0, _mobxReactLite.observer)(_CollectionToolbarFilters);
+//# sourceMappingURL=CollectionToolbarFilters.js.map

package/dist/cjs/components/CollectionToolbarFilters/CollectionToolbarFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_useFiltersLayout","_ToolbarCollectionContext","_AppliedFiltersTagList","_mobxReactLite","_ToolbarItemBox","_AppliedFiltersTagListState","_CollectionToolbarFiltersState","_CollectionFilter","_FiltersPanelSidePanelEntry","_MoreFiltersCTA","_react2","_useFiltersSyncProps","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_CollectionToolbarFilters","props","children","inline","maxInlineFilters","maxInlineLabels","panelTitle","onPanelClearButtonClicked","onSearchAppliedFilterTagRemove","onSubToolbarClearButtonClicked","hideAppliedFiltersTagList","useNewFilters","childrenArr","useFiltersSyncProps","state","useToolbarCollectionContext","toolbarFiltersState","useState","CollectionToolbarFiltersState","toolbar","setToolbarFiltersStateInitialized","useEffect","panels","registerSidePanel","FiltersPanelSidePanelEntry","onClearButtonClicked","forceShowSidePanel","useMemo","find","filter","type","displayName","includes","viewsProps","collection","customInlineElements","showFiltersPanelButton","totalInlineFilters","showLabels","useFiltersLayout","filters","length","totalFilters","filterElements","container","useWixPatternsContainer","filtersProps","map","filterChildProps","onAppliedFilterTagRemove","renderToolbarTag","renderPresetToolbarTag","search","setFilterTagsPropsIfChanged","featuredComponents","moreFiltersButton","createElement","MoreFiltersCTA","__self","__source","fileName","lineNumber","columnNumber","tagListState","AppliedFiltersTagListState","table","disposers","init","appliedFiltersTagList","component","AppliedFiltersTagList","forEach","d","Fragment","key","slice","element","index","_filterProps$toolbarI","filterProps","ToolbarItemBox","layout","dataHook","label","toolbarItemProps","CollectionFilter","CollectionToolbarFilters","exports","observer"],"sources":["../../../../src/components/CollectionToolbarFilters/CollectionToolbarFilters.tsx"],"sourcesContent":["import React, {\n  Fragment,\n  ReactNode,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { FilterElement } from './filterElement';\nimport { useFiltersLayout } from './useFiltersLayout';\nimport { useToolbarCollectionContext } from '../ToolbarCollectionContext';\nimport { AppliedFiltersTagList } from '../AppliedFiltersTagList';\nimport { observer } from 'mobx-react-lite';\nimport { ToolbarItemBox } from '../ToolbarItemBox';\nimport { AppliedFiltersTagListState } from '../AppliedFiltersTagList/AppliedFiltersTagListState';\nimport { CollectionToolbarFiltersState } from './CollectionToolbarFiltersState';\nimport { CollectionFilter } from '../CollectionFilter';\nimport { FiltersPanelSidePanelEntry } from './FiltersPanelSidePanelEntry';\nimport { MoreFiltersCTA } from '../MoreFiltersCTA';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { useFiltersSyncProps } from './useFiltersSyncProps';\n\nexport interface CollectionToolbarFiltersProps {\n  /**\n   * @deprecated\n   * Number of filter controls to be rendered inside the table toolbar\n   * Cairo changes the filters layout logic.\n   * The \"inline\" property of the \"CollectionToolbarFilters\" component is now deprecated, meaning that soon Cairo will automatically\n   * decide how to distribute filters between the toolbar and the filters panel.\n   * To enable the new logic, add the \"useNewFilters\" flag to \"CollectionToolbarFilters\" component.\n   */\n  inline?: 0 | 1 | 2 | 3;\n  /**\n   * A flag that indicates whether Cairo should use a new filters layout our not.\n   */\n  useNewFilters?: true;\n  maxInlineFilters?: number;\n  maxInlineLabels?: number;\n  /**\n   * Title of the filters panel\n   * @external\n   */\n  panelTitle?: string | ReactNode;\n  /**\n   * `React` children elements, that must accept [FilterProps](./?path=/story/common-filters--filterprops), such as:\n   * - [MultiSelectCheckboxFilter](./?path=/story/common-filters--multiselectcheckboxfilter)\n   * - [Custom Filters](./?path=/story/common-factories--customfilter)\n   * @external\n   */\n  children:\n    | (FilterElement | undefined | boolean)\n    | (FilterElement | undefined | boolean)[];\n  onPanelClearButtonClicked?: () => unknown;\n  onSearchAppliedFilterTagRemove?: (item: string) => unknown;\n  onSubToolbarClearButtonClicked?: () => unknown;\n  hideAppliedFiltersTagList?: boolean;\n}\n\nfunction _CollectionToolbarFilters(props: CollectionToolbarFiltersProps) {\n  const {\n    children,\n    inline,\n    maxInlineFilters,\n    maxInlineLabels,\n    panelTitle,\n    onPanelClearButtonClicked,\n    onSearchAppliedFilterTagRemove,\n    onSubToolbarClearButtonClicked,\n    hideAppliedFiltersTagList,\n    useNewFilters,\n  } = props;\n\n  const childrenArr = useFiltersSyncProps(children);\n\n  const state = useToolbarCollectionContext();\n\n  const [toolbarFiltersState] = useState(() => {\n    state.toolbarFiltersState ??= new CollectionToolbarFiltersState({\n      toolbar: state,\n    });\n    state.setToolbarFiltersStateInitialized(true);\n    return state.toolbarFiltersState;\n  });\n\n  useEffect(() => {\n    state.panels.registerSidePanel('filters', FiltersPanelSidePanelEntry);\n  }, []);\n\n  useEffect(() => {\n    toolbarFiltersState.onClearButtonClicked = onPanelClearButtonClicked;\n  }, [onPanelClearButtonClicked]);\n\n  const forceShowSidePanel = useMemo(\n    () =>\n      !!childrenArr.find((filter) => {\n        return (\n          filter.type.displayName &&\n          ['DateRangeFilter', 'MultiSelectCollectionFilter'].includes(\n            filter.type.displayName,\n          )\n        );\n      }),\n    [childrenArr],\n  );\n\n  const { viewsProps, collection } = state;\n\n  const customInlineElements = viewsProps ? 1 : 0;\n\n  const { showFiltersPanelButton, totalInlineFilters, showLabels } =\n    useFiltersLayout({\n      useNewFilters,\n      filters: childrenArr.length,\n      totalFilters: childrenArr.length + customInlineElements,\n      inline,\n      maxInlineFilters,\n      maxInlineLabels,\n      customInlineElements,\n      forceShowSidePanel,\n    });\n\n  useEffect(() => {\n    toolbarFiltersState.panelTitle.set(panelTitle);\n  }, [panelTitle]);\n\n  useEffect(() => {\n    toolbarFiltersState.totalInlineFilters.set(totalInlineFilters);\n  }, [totalInlineFilters]);\n\n  useEffect(() => {\n    toolbarFiltersState.filterElements.set(childrenArr);\n  }, [childrenArr]);\n\n  const container = useWixPatternsContainer();\n  const { filters } = collection;\n\n  const filtersProps = useMemo(\n    () => {\n      // share essential filter props globally\n      return [\n        ...childrenArr.map(({ props: filterChildProps, type }) => {\n          const { filter, onAppliedFilterTagRemove, renderToolbarTag } =\n            filterChildProps;\n\n          return {\n            filter,\n            onAppliedFilterTagRemove,\n            renderToolbarTag:\n              renderToolbarTag ?? type.renderPresetToolbarTag?.(container),\n          };\n        }),\n        {\n          filter: filters.search,\n          onAppliedFilterTagRemove: onSearchAppliedFilterTagRemove,\n        },\n      ];\n    },\n    childrenArr.map(({ props: { filter } }) => filter),\n  );\n\n  useEffect(() => {\n    state.setFilterTagsPropsIfChanged(filtersProps);\n\n    return () => {\n      state.setFilterTagsPropsIfChanged(null);\n    };\n  }, [filtersProps]);\n\n  useEffect(() => {\n    if (showFiltersPanelButton) {\n      state.featuredComponents.moreFiltersButton.set(() => <MoreFiltersCTA />);\n\n      return () => {\n        state.featuredComponents.moreFiltersButton.set(null);\n      };\n    }\n\n    state.featuredComponents.moreFiltersButton.set(null);\n\n    return;\n  }, [showFiltersPanelButton]);\n\n  const [tagListState] = useState(\n    () => new AppliedFiltersTagListState({ table: state }),\n  );\n\n  useEffect(() => {\n    const disposers = [tagListState.init()];\n\n    if (hideAppliedFiltersTagList) {\n      state.featuredComponents.appliedFiltersTagList.set(null);\n    } else {\n      state.featuredComponents.appliedFiltersTagList.set({\n        state: tagListState,\n        component: () => (\n          <AppliedFiltersTagList\n            state={tagListState}\n            onClearButtonClicked={onSubToolbarClearButtonClicked}\n          />\n        ),\n      });\n    }\n\n    return () => {\n      disposers.forEach((d) => d());\n      state.featuredComponents.appliedFiltersTagList.set(null);\n    };\n  }, [hideAppliedFiltersTagList]);\n\n  return (\n    // workaround to support bad enzyme version not detecting this as a valid fragment component\n    // https://wix.slack.com/archives/C02K83200PL/p1671962461443749\n    <Fragment key=\"toolbar-items\">\n      {childrenArr.slice(0, totalInlineFilters).map((element, index) => {\n        const { props: filterProps } = element;\n\n        return (\n          <ToolbarItemBox\n            key={index}\n            layout={filterProps.layout}\n            dataHook={`toolbar-item-filter-${index}`}\n            label={showLabels && filterProps.toolbarItemProps?.label}\n          >\n            {filterProps.filter ? (\n              <CollectionFilter\n                filter={filterProps.filter}\n                state={toolbarFiltersState}\n              >\n                {element}\n              </CollectionFilter>\n            ) : (\n              element\n            )}\n          </ToolbarItemBox>\n        );\n      })}\n    </Fragment>\n  );\n}\n\nexport const CollectionToolbarFilters = observer(_CollectionToolbarFilters);\n"],"mappings":"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"}

package/dist/cjs/components/CollectionToolbarFilters/CollectionToolbarFiltersState.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.CollectionToolbarFiltersState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _bexCore = require("@wix/bex-core");
+var _bi = require("@wix/bex-core/bi");
+var _mobx = require("mobx");
+class CollectionToolbarFiltersState {
+  constructor(params) {
+    (0, _defineProperty2.default)(this, "toolbar", void 0);
+    (0, _defineProperty2.default)(this, "panelTitle", new _bexCore.ValueBox(undefined));
+    (0, _defineProperty2.default)(this, "totalInlineFilters", new _bexCore.ValueBox(null));
+    (0, _defineProperty2.default)(this, "filterElements", new _bexCore.ValueBox([]));
+    (0, _defineProperty2.default)(this, "onClearButtonClicked", void 0);
+    (0, _defineProperty2.default)(this, "onFiltersButtonClick", (0, _mobx.action)(() => {
+      const actionStartTime = performance.now();
+      const {
+        reportBi
+      } = this.toolbar;
+      const isOpened = this.toolbar.panels.toggleSidePanel('filters');
+      // to be called after the panel is opened/closed and call stack is cleared
+      setTimeout(() => {
+        reportBi((0, _bexCore.withoutDefaults)(_bi.cairoFiltersPanelUsed)({
+          ...this.toolbar._commonDynamicBiParams(),
+          isOpened,
+          origin: 'Filter Button',
+          feature: 'Filter',
+          timeFromAction: Math.round(performance.now() - actionStartTime)
+        }));
+      });
+    }));
+    this.toolbar = params.toolbar;
+    (0, _mobx.makeObservable)(this, {
+      panelFilterElements: _mobx.computed,
+      panelFilters: _mobx.computed
+    });
+  }
+  get panelFilterElements() {
+    const {
+      totalInlineFilters: {
+        value: totalInlineFilters
+      },
+      filterElements: {
+        value: filterElements
+      }
+    } = this;
+    return totalInlineFilters != null ? filterElements.slice(totalInlineFilters) : [];
+  }
+  get panelFilters() {
+    return this.panelFilterElements.map(element => element.props.filter);
+  }
+}
+exports.CollectionToolbarFiltersState = CollectionToolbarFiltersState;
+//# sourceMappingURL=CollectionToolbarFiltersState.js.map

package/dist/cjs/components/CollectionToolbarFilters/CollectionToolbarFiltersState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_bexCore","require","_bi","_mobx","CollectionToolbarFiltersState","constructor","params","_defineProperty2","default","ValueBox","undefined","action","actionStartTime","performance","now","reportBi","toolbar","isOpened","panels","toggleSidePanel","setTimeout","withoutDefaults","cairoFiltersPanelUsed","_commonDynamicBiParams","origin","feature","timeFromAction","Math","round","makeObservable","panelFilterElements","computed","panelFilters","totalInlineFilters","value","filterElements","slice","map","element","props","filter","exports"],"sources":["../../../../src/components/CollectionToolbarFilters/CollectionToolbarFiltersState.ts"],"sourcesContent":["import { ToolbarCollectionState } from '../../state';\nimport { FiltersMap, ValueBox, withoutDefaults } from '@wix/bex-core';\nimport { cairoFiltersPanelUsed } from '@wix/bex-core/bi';\nimport { action, computed, makeObservable } from 'mobx';\nimport { ReactNode } from 'react';\nimport { FilterElement } from './filterElement';\n\nexport interface CollectionToolbarFiltersStateParams<T, F extends FiltersMap> {\n  readonly toolbar: ToolbarCollectionState<T, F>;\n}\n\nexport class CollectionToolbarFiltersState<T, F extends FiltersMap> {\n  readonly toolbar;\n\n  readonly panelTitle = new ValueBox<ReactNode>(undefined);\n  readonly totalInlineFilters = new ValueBox<number | null>(null);\n  readonly filterElements = new ValueBox<FilterElement[]>([]);\n\n  onClearButtonClicked?: () => unknown;\n\n  constructor(params: CollectionToolbarFiltersStateParams<T, F>) {\n    this.toolbar = params.toolbar;\n\n    makeObservable(this, {\n      panelFilterElements: computed,\n      panelFilters: computed,\n    });\n  }\n\n  get panelFilterElements() {\n    const {\n      totalInlineFilters: { value: totalInlineFilters },\n      filterElements: { value: filterElements },\n    } = this;\n    return totalInlineFilters != null\n      ? filterElements.slice(totalInlineFilters)\n      : [];\n  }\n\n  get panelFilters() {\n    return this.panelFilterElements.map((element) => element.props.filter);\n  }\n\n  onFiltersButtonClick = action(() => {\n    const actionStartTime = performance.now();\n    const { reportBi } = this.toolbar;\n\n    const isOpened = this.toolbar.panels.toggleSidePanel('filters');\n    // to be called after the panel is opened/closed and call stack is cleared\n    setTimeout(() => {\n      reportBi(\n        withoutDefaults(cairoFiltersPanelUsed)({\n          ...this.toolbar._commonDynamicBiParams(),\n          isOpened,\n          origin: 'Filter Button',\n          feature: 'Filter',\n          timeFromAction: Math.round(performance.now() - actionStartTime),\n        }),\n      );\n    });\n  });\n}\n"],"mappings":";;;;;;AACA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,GAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAQO,MAAMG,6BAA6B,CAA0B;EASlEC,WAAWA,CAACC,MAAiD,EAAE;IAAA,IAAAC,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA,sBANzC,IAAIC,iBAAQ,CAAYC,SAAS,CAAC;IAAA,IAAAH,gBAAA,CAAAC,OAAA,8BAC1B,IAAIC,iBAAQ,CAAgB,IAAI,CAAC;IAAA,IAAAF,gBAAA,CAAAC,OAAA,0BACrC,IAAIC,iBAAQ,CAAkB,EAAE,CAAC;IAAA,IAAAF,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA,gCA2BpC,IAAAG,YAAM,EAAC,MAAM;MAClC,MAAMC,eAAe,GAAGC,WAAW,CAACC,GAAG,CAAC,CAAC;MACzC,MAAM;QAAEC;MAAS,CAAC,GAAG,IAAI,CAACC,OAAO;MAEjC,MAAMC,QAAQ,GAAG,IAAI,CAACD,OAAO,CAACE,MAAM,CAACC,eAAe,CAAC,SAAS,CAAC;MAC/D;MACAC,UAAU,CAAC,MAAM;QACfL,QAAQ,CACN,IAAAM,wBAAe,EAACC,yBAAqB,CAAC,CAAC;UACrC,GAAG,IAAI,CAACN,OAAO,CAACO,sBAAsB,CAAC,CAAC;UACxCN,QAAQ;UACRO,MAAM,EAAE,eAAe;UACvBC,OAAO,EAAE,QAAQ;UACjBC,cAAc,EAAEC,IAAI,CAACC,KAAK,CAACf,WAAW,CAACC,GAAG,CAAC,CAAC,GAAGF,eAAe;QAChE,CAAC,CACH,CAAC;MACH,CAAC,CAAC;IACJ,CAAC,CAAC;IAvCA,IAAI,CAACI,OAAO,GAAGV,MAAM,CAACU,OAAO;IAE7B,IAAAa,oBAAc,EAAC,IAAI,EAAE;MACnBC,mBAAmB,EAAEC,cAAQ;MAC7BC,YAAY,EAAED;IAChB,CAAC,CAAC;EACJ;EAEA,IAAID,mBAAmBA,CAAA,EAAG;IACxB,MAAM;MACJG,kBAAkB,EAAE;QAAEC,KAAK,EAAED;MAAmB,CAAC;MACjDE,cAAc,EAAE;QAAED,KAAK,EAAEC;MAAe;IAC1C,CAAC,GAAG,IAAI;IACR,OAAOF,kBAAkB,IAAI,IAAI,GAC7BE,cAAc,CAACC,KAAK,CAACH,kBAAkB,CAAC,GACxC,EAAE;EACR;EAEA,IAAID,YAAYA,CAAA,EAAG;IACjB,OAAO,IAAI,CAACF,mBAAmB,CAACO,GAAG,CAAEC,OAAO,IAAKA,OAAO,CAACC,KAAK,CAACC,MAAM,CAAC;EACxE;AAoBF;AAACC,OAAA,CAAArC,6BAAA,GAAAA,6BAAA"}