@wix/patterns 0.8.0

package/dist/cjs/components/TableTopNotification/ScrollAwayScheduleStrategy.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.ScrollAwayScheduleStrategy = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mobx = require("mobx");
+var _events = require("events");
+class ScrollAwayScheduleStrategy {
+  constructor(state) {
+    (0, _defineProperty2.default)(this, "state", void 0);
+    (0, _defineProperty2.default)(this, "events", new _events.EventEmitter());
+    this.state = state;
+    (0, _mobx.makeObservable)(this, {
+      preventEnter: _mobx.action.bound,
+      preventExit: _mobx.action.bound,
+      onIntersectionRatioChanged: _mobx.action.bound
+    });
+  }
+  _scheduleEnter() {
+    const {
+      topNotification
+    } = this.state;
+    const {
+      nextData
+    } = topNotification;
+    this.events.removeAllListeners('enter');
+    this.events.once('enter', (0, _mobx.action)(() => {
+      if (nextData === topNotification.nextData) {
+        topNotification.set(nextData);
+      }
+    }));
+  }
+  preventEnter() {
+    const {
+      topNotification,
+      intersection,
+      consideredVisibleRatio
+    } = this.state;
+    if (intersection.intersectionRatio < consideredVisibleRatio) {
+      topNotification.show = false;
+      // console.log('enter prevented');
+      this._scheduleEnter();
+    }
+  }
+  preventExit() {
+    const {
+      topNotification,
+      intersection,
+      consideredVisibleRatio
+    } = this.state;
+    if (intersection.intersectionRatio < consideredVisibleRatio) {
+      topNotification.show = true;
+      // console.log('exit prevented');
+      this._scheduleEnter();
+    }
+  }
+  onIntersectionRatioChanged(ratio) {
+    const {
+      consideredVisibleRatio,
+      topNotification
+    } = this.state;
+    // when scrolling in trigger enter
+    if (ratio >= consideredVisibleRatio) {
+      this.events.emit('enter');
+      topNotification.events.off('beforeExit', this.preventExit);
+      topNotification.events.off('enter', this.preventEnter);
+    }
+    // when scrolling out schedule prevention
+    else {
+      topNotification.events.off('beforeExit', this.preventExit);
+      topNotification.events.off('enter', this.preventEnter);
+      if (topNotification.show) {
+        topNotification.events.on('beforeExit', this.preventExit);
+      } else {
+        topNotification.events.on('enter', this.preventEnter);
+      }
+    }
+  }
+  init() {}
+}
+exports.ScrollAwayScheduleStrategy = ScrollAwayScheduleStrategy;
+//# sourceMappingURL=ScrollAwayScheduleStrategy.js.map

package/dist/cjs/components/TableTopNotification/ScrollAwayScheduleStrategy.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_mobx","require","_events","ScrollAwayScheduleStrategy","constructor","state","_defineProperty2","default","EventEmitter","makeObservable","preventEnter","action","bound","preventExit","onIntersectionRatioChanged","_scheduleEnter","topNotification","nextData","events","removeAllListeners","once","set","intersection","consideredVisibleRatio","intersectionRatio","show","ratio","emit","off","on","init","exports"],"sources":["../../../../src/components/TableTopNotification/ScrollAwayScheduleStrategy.ts"],"sourcesContent":["import { TableTopNotificationState } from './TableTopNotificationState';\nimport { action, makeObservable } from 'mobx';\nimport { EventEmitter } from 'events';\nimport { TypedEmitter } from '@wix/bex-core/events';\n\nexport class ScrollAwayScheduleStrategy {\n  state;\n\n  events = new EventEmitter() as TypedEmitter<{\n    enter: () => unknown;\n  }>;\n\n  constructor(state: TableTopNotificationState) {\n    this.state = state;\n    makeObservable(this, {\n      preventEnter: action.bound,\n      preventExit: action.bound,\n      onIntersectionRatioChanged: action.bound,\n    });\n  }\n\n  _scheduleEnter() {\n    const { topNotification } = this.state;\n    const { nextData } = topNotification;\n\n    this.events.removeAllListeners('enter');\n\n    this.events.once(\n      'enter',\n      action(() => {\n        if (nextData === topNotification.nextData) {\n          topNotification.set(nextData);\n        }\n      }),\n    );\n  }\n\n  preventEnter() {\n    const { topNotification, intersection, consideredVisibleRatio } =\n      this.state;\n\n    if (intersection.intersectionRatio < consideredVisibleRatio) {\n      topNotification.show = false;\n      // console.log('enter prevented');\n      this._scheduleEnter();\n    }\n  }\n\n  preventExit() {\n    const { topNotification, intersection, consideredVisibleRatio } =\n      this.state;\n\n    if (intersection.intersectionRatio < consideredVisibleRatio) {\n      topNotification.show = true;\n      // console.log('exit prevented');\n      this._scheduleEnter();\n    }\n  }\n\n  onIntersectionRatioChanged(ratio: number) {\n    const { consideredVisibleRatio, topNotification } = this.state;\n    // when scrolling in trigger enter\n    if (ratio >= consideredVisibleRatio) {\n      this.events.emit('enter');\n      topNotification.events.off('beforeExit', this.preventExit);\n      topNotification.events.off('enter', this.preventEnter);\n    }\n    // when scrolling out schedule prevention\n    else {\n      topNotification.events.off('beforeExit', this.preventExit);\n      topNotification.events.off('enter', this.preventEnter);\n      if (topNotification.show) {\n        topNotification.events.on('beforeExit', this.preventExit);\n      } else {\n        topNotification.events.on('enter', this.preventEnter);\n      }\n    }\n  }\n\n  init() {}\n}\n"],"mappings":";;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAGO,MAAME,0BAA0B,CAAC;EAOtCC,WAAWA,CAACC,KAAgC,EAAE;IAAA,IAAAC,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA,kBAJrC,IAAIC,oBAAY,CAAC,CAAC;IAKzB,IAAI,CAACH,KAAK,GAAGA,KAAK;IAClB,IAAAI,oBAAc,EAAC,IAAI,EAAE;MACnBC,YAAY,EAAEC,YAAM,CAACC,KAAK;MAC1BC,WAAW,EAAEF,YAAM,CAACC,KAAK;MACzBE,0BAA0B,EAAEH,YAAM,CAACC;IACrC,CAAC,CAAC;EACJ;EAEAG,cAAcA,CAAA,EAAG;IACf,MAAM;MAAEC;IAAgB,CAAC,GAAG,IAAI,CAACX,KAAK;IACtC,MAAM;MAAEY;IAAS,CAAC,GAAGD,eAAe;IAEpC,IAAI,CAACE,MAAM,CAACC,kBAAkB,CAAC,OAAO,CAAC;IAEvC,IAAI,CAACD,MAAM,CAACE,IAAI,CACd,OAAO,EACP,IAAAT,YAAM,EAAC,MAAM;MACX,IAAIM,QAAQ,KAAKD,eAAe,CAACC,QAAQ,EAAE;QACzCD,eAAe,CAACK,GAAG,CAACJ,QAAQ,CAAC;MAC/B;IACF,CAAC,CACH,CAAC;EACH;EAEAP,YAAYA,CAAA,EAAG;IACb,MAAM;MAAEM,eAAe;MAAEM,YAAY;MAAEC;IAAuB,CAAC,GAC7D,IAAI,CAAClB,KAAK;IAEZ,IAAIiB,YAAY,CAACE,iBAAiB,GAAGD,sBAAsB,EAAE;MAC3DP,eAAe,CAACS,IAAI,GAAG,KAAK;MAC5B;MACA,IAAI,CAACV,cAAc,CAAC,CAAC;IACvB;EACF;EAEAF,WAAWA,CAAA,EAAG;IACZ,MAAM;MAAEG,eAAe;MAAEM,YAAY;MAAEC;IAAuB,CAAC,GAC7D,IAAI,CAAClB,KAAK;IAEZ,IAAIiB,YAAY,CAACE,iBAAiB,GAAGD,sBAAsB,EAAE;MAC3DP,eAAe,CAACS,IAAI,GAAG,IAAI;MAC3B;MACA,IAAI,CAACV,cAAc,CAAC,CAAC;IACvB;EACF;EAEAD,0BAA0BA,CAACY,KAAa,EAAE;IACxC,MAAM;MAAEH,sBAAsB;MAAEP;IAAgB,CAAC,GAAG,IAAI,CAACX,KAAK;IAC9D;IACA,IAAIqB,KAAK,IAAIH,sBAAsB,EAAE;MACnC,IAAI,CAACL,MAAM,CAACS,IAAI,CAAC,OAAO,CAAC;MACzBX,eAAe,CAACE,MAAM,CAACU,GAAG,CAAC,YAAY,EAAE,IAAI,CAACf,WAAW,CAAC;MAC1DG,eAAe,CAACE,MAAM,CAACU,GAAG,CAAC,OAAO,EAAE,IAAI,CAAClB,YAAY,CAAC;IACxD;IACA;IAAA,KACK;MACHM,eAAe,CAACE,MAAM,CAACU,GAAG,CAAC,YAAY,EAAE,IAAI,CAACf,WAAW,CAAC;MAC1DG,eAAe,CAACE,MAAM,CAACU,GAAG,CAAC,OAAO,EAAE,IAAI,CAAClB,YAAY,CAAC;MACtD,IAAIM,eAAe,CAACS,IAAI,EAAE;QACxBT,eAAe,CAACE,MAAM,CAACW,EAAE,CAAC,YAAY,EAAE,IAAI,CAAChB,WAAW,CAAC;MAC3D,CAAC,MAAM;QACLG,eAAe,CAACE,MAAM,CAACW,EAAE,CAAC,OAAO,EAAE,IAAI,CAACnB,YAAY,CAAC;MACvD;IACF;EACF;EAEAoB,IAAIA,CAAA,EAAG,CAAC;AACV;AAACC,OAAA,CAAA5B,0BAAA,GAAAA,0BAAA"}

package/dist/cjs/components/TableTopNotification/TableTopNotification.js

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.TableTopNotification = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _designSystem = require("@wix/design-system");
+var _Fade = require("../Fade");
+var _Collapse = require("../Collapse");
+var _mobxReactLite = require("mobx-react-lite");
+var _ToolbarCollectionContext = require("../ToolbarCollectionContext");
+var _TableTopNotificationState = require("./TableTopNotificationState");
+var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/TableTopNotification/TableTopNotification.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 _TableTopNotification(props) {
+  const {
+    onClose,
+    showCloseButton = !!onClose,
+    onAfterClose,
+    onAfterOpen,
+    hideOnSearch,
+    children,
+    appearance = 'standard',
+    ...rest
+  } = props;
+  const toolbarCollectionState = (0, _ToolbarCollectionContext.useToolbarCollectionContext)();
+  const {
+    collection,
+    totalStickyContentHeight
+  } = toolbarCollectionState;
+  const {
+    _topNotification: topNotification,
+    query: {
+      search
+    }
+  } = collection;
+  const [state] = (0, _react.useState)(() => new _TableTopNotificationState.TableTopNotificationState({
+    topNotification,
+    getStickyContentHeight: () => toolbarCollectionState.totalStickyContentHeight,
+    reportBI: toolbarCollectionState.reportBi
+  }));
+  const targetRef = (0, _react.useRef)();
+  (0, _react.useEffect)(() => state.init(), []);
+  const {
+    position
+  } = state;
+  const {
+    data: text,
+    show
+  } = topNotification;
+  let child;
+  if (hideOnSearch && !search.isEmpty) {
+    child = null;
+  } else {
+    child = /*#__PURE__*/_react.default.createElement(_Collapse.Collapse, {
+      timeout: 300,
+      state: topNotification,
+      onEntered: onAfterOpen,
+      style: {
+        flexShrink: 0,
+        ...(position === 'sticky' && totalStickyContentHeight != null && {
+          position: 'sticky',
+          top: totalStickyContentHeight,
+          zIndex: 1100
+        }),
+        width: '100%'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 69,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Fade.Fade, {
+      timeout: 300,
+      in: show,
+      unmountOnExit: true,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 84,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+      padding: "SP4",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 85,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.SectionHelper, (0, _extends2.default)({}, rest, {
+      dataHook: "table-top-notification",
+      showCloseButton: showCloseButton,
+      onClose: e => {
+        topNotification.clickClose(onAfterClose);
+        onClose == null || onClose(e);
+      },
+      appearance: appearance,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 86,
+        columnNumber: 13
+      }
+    }), text, children))));
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, child, /*#__PURE__*/_react.default.createElement("div", {
+    ref: el => {
+      targetRef.current = el;
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 108,
+      columnNumber: 7
+    }
+  }));
+}
+const TableTopNotification = exports.TableTopNotification = (0, _mobxReactLite.observer)(_TableTopNotification);
+TableTopNotification.displayName = 'TableTopNotification';
+//# sourceMappingURL=TableTopNotification.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_Fade","_Collapse","_mobxReactLite","_ToolbarCollectionContext","_TableTopNotificationState","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_TableTopNotification","props","onClose","showCloseButton","onAfterClose","onAfterOpen","hideOnSearch","children","appearance","rest","toolbarCollectionState","useToolbarCollectionContext","collection","totalStickyContentHeight","_topNotification","topNotification","query","search","state","useState","TableTopNotificationState","getStickyContentHeight","reportBI","reportBi","targetRef","useRef","useEffect","init","position","data","text","show","child","isEmpty","createElement","Collapse","timeout","onEntered","style","flexShrink","top","zIndex","width","__self","__source","fileName","lineNumber","columnNumber","Fade","in","unmountOnExit","Box","padding","SectionHelper","_extends2","dataHook","clickClose","Fragment","ref","el","current","TableTopNotification","exports","observer","displayName"],"sources":["../../../../src/components/TableTopNotification/TableTopNotification.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useRef, useState } from 'react';\nimport { Box, SectionHelper, SectionHelperProps } from '@wix/design-system';\nimport { Fade } from '../Fade';\nimport { Collapse } from '../Collapse';\nimport { observer } from 'mobx-react-lite';\nimport { useToolbarCollectionContext } from '../ToolbarCollectionContext';\nimport { TableTopNotificationState } from './TableTopNotificationState';\n\nexport interface TableTopNotificationProps extends Partial<SectionHelperProps> {\n  /**\n   * After the notification close animation finished\n   */\n  onAfterClose?: () => unknown;\n  /**\n   * After the notification open animation finished\n   */\n  onAfterOpen?: () => unknown;\n\n  /** hide the notification when search is applied. @default false */\n  hideOnSearch?: boolean;\n\n  children?: ReactNode;\n}\n\nfunction _TableTopNotification(props: TableTopNotificationProps) {\n  const {\n    onClose,\n    showCloseButton = !!onClose,\n    onAfterClose,\n    onAfterOpen,\n    hideOnSearch,\n    children,\n    appearance = 'standard',\n    ...rest\n  } = props;\n\n  const toolbarCollectionState = useToolbarCollectionContext();\n\n  const { collection, totalStickyContentHeight } = toolbarCollectionState;\n\n  const {\n    _topNotification: topNotification,\n    query: { search },\n  } = collection;\n\n  const [state] = useState(\n    () =>\n      new TableTopNotificationState({\n        topNotification,\n        getStickyContentHeight: () =>\n          toolbarCollectionState.totalStickyContentHeight,\n        reportBI: toolbarCollectionState.reportBi,\n      }),\n  );\n\n  const targetRef = useRef<HTMLDivElement | null>();\n\n  useEffect(() => state.init(), []);\n\n  const { position } = state;\n  const { data: text, show } = topNotification;\n\n  let child;\n\n  if (hideOnSearch && !search.isEmpty) {\n    child = null;\n  } else {\n    child = (\n      <Collapse\n        timeout={300}\n        state={topNotification}\n        onEntered={onAfterOpen}\n        style={{\n          flexShrink: 0,\n          ...(position === 'sticky' &&\n            totalStickyContentHeight != null && {\n              position: 'sticky',\n              top: totalStickyContentHeight,\n              zIndex: 1100,\n            }),\n          width: '100%',\n        }}\n      >\n        <Fade timeout={300} in={show} unmountOnExit>\n          <Box padding=\"SP4\">\n            <SectionHelper\n              {...rest}\n              dataHook=\"table-top-notification\"\n              showCloseButton={showCloseButton}\n              onClose={(e) => {\n                topNotification.clickClose(onAfterClose);\n                onClose?.(e);\n              }}\n              appearance={appearance}\n            >\n              {text}\n              {children}\n            </SectionHelper>\n          </Box>\n        </Fade>\n      </Collapse>\n    );\n  }\n\n  return (\n    <>\n      {child}\n      <div\n        ref={(el) => {\n          targetRef.current = el;\n        }}\n      />\n    </>\n  );\n}\n\nexport const TableTopNotification = observer(_TableTopNotification);\nTableTopNotification.displayName = 'TableTopNotification';\n"],"mappings":"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"}

package/dist/cjs/components/TableTopNotification/TableTopNotification.uni.driver.js

@@ -0,0 +1,18 @@
+"use strict";
+
+exports.__esModule = true;
+exports.TableTopNotificationUniDriver = TableTopNotificationUniDriver;
+exports.default = void 0;
+var _unidriver = require("@wix/design-system/dist/testkit/unidriver");
+var _unidriver2 = require("../../unidriver");
+function TableTopNotificationUniDriver(base, body) {
+  const sectionHelper = (0, _unidriver.SectionHelperUniDriver)(base, body);
+  return {
+    wait: timeout => base.wait(timeout),
+    ...(0, _unidriver2.baseUniDriverFactory)(base),
+    clickClose: () => sectionHelper.clickClose(),
+    textContent: () => sectionHelper.textContent()
+  };
+}
+var _default = exports.default = TableTopNotificationUniDriver;
+//# sourceMappingURL=TableTopNotification.uni.driver.js.map

package/dist/cjs/components/TableTopNotification/TableTopNotification.uni.driver.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_unidriver","require","_unidriver2","TableTopNotificationUniDriver","base","body","sectionHelper","SectionHelperUniDriver","wait","timeout","baseUniDriverFactory","clickClose","textContent","_default","exports","default"],"sources":["../../../../src/components/TableTopNotification/TableTopNotification.uni.driver.ts"],"sourcesContent":["import { SectionHelperUniDriver } from '@wix/design-system/dist/testkit/unidriver';\nimport { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\nimport { baseUniDriverFactory } from '../../unidriver';\n\nexport function TableTopNotificationUniDriver(\n  base: UniDriver,\n  body: UniDriver,\n) {\n  const sectionHelper = SectionHelperUniDriver(base, body);\n  return {\n    wait: (timeout?: number) => base.wait(timeout),\n    ...baseUniDriverFactory(base),\n    clickClose: () => sectionHelper.clickClose(),\n    textContent: () => sectionHelper.textContent(),\n  };\n}\n\nexport default TableTopNotificationUniDriver;\n"],"mappings":";;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAEA,IAAAC,WAAA,GAAAD,OAAA;AAEO,SAASE,6BAA6BA,CAC3CC,IAAe,EACfC,IAAe,EACf;EACA,MAAMC,aAAa,GAAG,IAAAC,iCAAsB,EAACH,IAAI,EAAEC,IAAI,CAAC;EACxD,OAAO;IACLG,IAAI,EAAGC,OAAgB,IAAKL,IAAI,CAACI,IAAI,CAACC,OAAO,CAAC;IAC9C,GAAG,IAAAC,gCAAoB,EAACN,IAAI,CAAC;IAC7BO,UAAU,EAAEA,CAAA,KAAML,aAAa,CAACK,UAAU,CAAC,CAAC;IAC5CC,WAAW,EAAEA,CAAA,KAAMN,aAAa,CAACM,WAAW,CAAC;EAC/C,CAAC;AACH;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcZ,6BAA6B"}

package/dist/cjs/components/TableTopNotification/TableTopNotificationState.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.TableTopNotificationState = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _bexCore = require("@wix/bex-core");
+var _state = require("../../state");
+var _mobx = require("mobx");
+var _bi = require("@wix/bex-core/bi");
+// import type { ScrollAwayPushStrategy } from './ScrollAwayPushStrategy';
+// import { ScrollAwayScheduleStrategy } from './ScrollAwayScheduleStrategy';
+// type ScrolledAwayStrategy = ScrollAwayPushStrategy | ScrollAwayScheduleStrategy;
+
+class TableTopNotificationState {
+  constructor(params) {
+    (0, _defineProperty2.default)(this, "getStickyContentHeight", void 0);
+    (0, _defineProperty2.default)(this, "topNotification", void 0);
+    (0, _defineProperty2.default)(this, "intersection", new _state.IntersectionObserverState());
+    (0, _defineProperty2.default)(this, "consideredVisibleRatio", void 0);
+    (0, _defineProperty2.default)(this, "reportBI", void 0);
+    (0, _defineProperty2.default)(this, "position", 'inline');
+    this.getStickyContentHeight = params.getStickyContentHeight;
+    this.topNotification = params.topNotification;
+    this.consideredVisibleRatio = params.consideredVisibleRatio ?? 0.9;
+    this.reportBI = params.reportBI;
+    (0, _mobx.makeObservable)(this, {
+      position: _mobx.observable.ref
+    });
+  }
+  init() {
+    const {
+      topNotification: {
+        events
+      }
+    } = this;
+    const disposers = [(0, _bexCore.addEventListener)(events, 'enter', () => {
+      this.reportBI((0, _bexCore.withoutDefaults)(_bi.cairoTableTopNotificationDisplayed)({
+        notificationText: this.topNotification.data ?? undefined
+      }));
+      const startTime = performance.now();
+      events.once('dismissed', ({
+        dismissMode
+      }) => {
+        const duration = Math.round(performance.now() - startTime);
+        this.reportBI((0, _bexCore.withoutDefaults)(_bi.cairoTableTopNotificationDismissed)({
+          dismissMode,
+          duration,
+          notificationText: this.topNotification.data ?? undefined
+        }));
+      });
+    })];
+    return () => {
+      disposers.forEach(d => d == null ? void 0 : d());
+    };
+  }
+}
+exports.TableTopNotificationState = TableTopNotificationState;
+//# sourceMappingURL=TableTopNotificationState.js.map

package/dist/cjs/components/TableTopNotification/TableTopNotificationState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_bexCore","require","_state","_mobx","_bi","TableTopNotificationState","constructor","params","_defineProperty2","default","IntersectionObserverState","getStickyContentHeight","topNotification","consideredVisibleRatio","reportBI","makeObservable","position","observable","ref","init","events","disposers","addEventListener","withoutDefaults","cairoTableTopNotificationDisplayed","notificationText","data","undefined","startTime","performance","now","once","dismissMode","duration","Math","round","cairoTableTopNotificationDismissed","forEach","d","exports"],"sources":["../../../../src/components/TableTopNotification/TableTopNotificationState.ts"],"sourcesContent":["import {\n  addEventListener,\n  ReportBI,\n  TransitionState,\n  withoutDefaults,\n} from '@wix/bex-core';\nimport { IntersectionObserverState } from '../../state';\nimport { makeObservable, observable } from 'mobx';\nimport {\n  cairoTableTopNotificationDismissed,\n  cairoTableTopNotificationDisplayed,\n} from '@wix/bex-core/bi';\n// import type { ScrollAwayPushStrategy } from './ScrollAwayPushStrategy';\n// import { ScrollAwayScheduleStrategy } from './ScrollAwayScheduleStrategy';\n// type ScrolledAwayStrategy = ScrollAwayPushStrategy | ScrollAwayScheduleStrategy;\n\nexport interface TableTopNotificationStateParams {\n  getStickyContentHeight: () => number | null;\n  topNotification: TransitionState<string | null | undefined>;\n  consideredVisibleRatio?: number;\n  reportBI: ReportBI;\n}\nexport class TableTopNotificationState {\n  readonly getStickyContentHeight;\n  readonly topNotification;\n  readonly intersection = new IntersectionObserverState();\n  readonly consideredVisibleRatio;\n  readonly reportBI: ReportBI;\n\n  position: 'sticky' | 'inline' = 'inline';\n\n  constructor(params: TableTopNotificationStateParams) {\n    this.getStickyContentHeight = params.getStickyContentHeight;\n    this.topNotification = params.topNotification;\n    this.consideredVisibleRatio = params.consideredVisibleRatio ?? 0.9;\n    this.reportBI = params.reportBI;\n\n    makeObservable(this, {\n      position: observable.ref,\n    });\n  }\n\n  init() {\n    const {\n      topNotification: { events },\n    } = this;\n\n    const disposers = [\n      addEventListener(events, 'enter', () => {\n        this.reportBI(\n          withoutDefaults(cairoTableTopNotificationDisplayed)({\n            notificationText: this.topNotification.data ?? undefined,\n          }),\n        );\n\n        const startTime = performance.now();\n\n        events.once('dismissed', ({ dismissMode }) => {\n          const duration = Math.round(performance.now() - startTime);\n          this.reportBI(\n            withoutDefaults(cairoTableTopNotificationDismissed)({\n              dismissMode,\n              duration,\n              notificationText: this.topNotification.data ?? undefined,\n            }),\n          );\n        });\n      }),\n    ];\n\n    return () => {\n      disposers.forEach((d) => d?.());\n    };\n  }\n}\n"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AAMA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,GAAA,GAAAH,OAAA;AAIA;AACA;AACA;;AAQO,MAAMI,yBAAyB,CAAC;EASrCC,WAAWA,CAACC,MAAuC,EAAE;IAAA,IAAAC,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA,wBAN7B,IAAIC,gCAAyB,CAAC,CAAC;IAAA,IAAAF,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA,oBAIvB,QAAQ;IAGtC,IAAI,CAACE,sBAAsB,GAAGJ,MAAM,CAACI,sBAAsB;IAC3D,IAAI,CAACC,eAAe,GAAGL,MAAM,CAACK,eAAe;IAC7C,IAAI,CAACC,sBAAsB,GAAGN,MAAM,CAACM,sBAAsB,IAAI,GAAG;IAClE,IAAI,CAACC,QAAQ,GAAGP,MAAM,CAACO,QAAQ;IAE/B,IAAAC,oBAAc,EAAC,IAAI,EAAE;MACnBC,QAAQ,EAAEC,gBAAU,CAACC;IACvB,CAAC,CAAC;EACJ;EAEAC,IAAIA,CAAA,EAAG;IACL,MAAM;MACJP,eAAe,EAAE;QAAEQ;MAAO;IAC5B,CAAC,GAAG,IAAI;IAER,MAAMC,SAAS,GAAG,CAChB,IAAAC,yBAAgB,EAACF,MAAM,EAAE,OAAO,EAAE,MAAM;MACtC,IAAI,CAACN,QAAQ,CACX,IAAAS,wBAAe,EAACC,sCAAkC,CAAC,CAAC;QAClDC,gBAAgB,EAAE,IAAI,CAACb,eAAe,CAACc,IAAI,IAAIC;MACjD,CAAC,CACH,CAAC;MAED,MAAMC,SAAS,GAAGC,WAAW,CAACC,GAAG,CAAC,CAAC;MAEnCV,MAAM,CAACW,IAAI,CAAC,WAAW,EAAE,CAAC;QAAEC;MAAY,CAAC,KAAK;QAC5C,MAAMC,QAAQ,GAAGC,IAAI,CAACC,KAAK,CAACN,WAAW,CAACC,GAAG,CAAC,CAAC,GAAGF,SAAS,CAAC;QAC1D,IAAI,CAACd,QAAQ,CACX,IAAAS,wBAAe,EAACa,sCAAkC,CAAC,CAAC;UAClDJ,WAAW;UACXC,QAAQ;UACRR,gBAAgB,EAAE,IAAI,CAACb,eAAe,CAACc,IAAI,IAAIC;QACjD,CAAC,CACH,CAAC;MACH,CAAC,CAAC;IACJ,CAAC,CAAC,CACH;IAED,OAAO,MAAM;MACXN,SAAS,CAACgB,OAAO,CAAEC,CAAC,IAAKA,CAAC,oBAADA,CAAC,CAAG,CAAC,CAAC;IACjC,CAAC;EACH;AACF;AAACC,OAAA,CAAAlC,yBAAA,GAAAA,yBAAA"}

package/dist/cjs/components/TableTopNotification/TopNotificationRenderProp.js

@@ -0,0 +1,4 @@
+"use strict";
+
+exports.__esModule = true;
+//# sourceMappingURL=TopNotificationRenderProp.js.map

package/dist/cjs/components/TableTopNotification/TopNotificationRenderProp.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../src/components/TableTopNotification/TopNotificationRenderProp.ts"],"sourcesContent":["import { ReactElement } from 'react';\nimport { TableTopNotificationProps } from './TableTopNotification';\n\nexport type TopNotificationBasicRenderProp =\n  | ReactElement<TableTopNotificationProps>\n  | (() => ReactElement<TableTopNotificationProps> | boolean | null | undefined)\n  | boolean\n  | null\n  | undefined;\n"],"mappings":""}

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

@@ -0,0 +1,16 @@
+"use strict";
+
+exports.__esModule = true;
+var _TableTopNotification = require("./TableTopNotification");
+Object.keys(_TableTopNotification).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TableTopNotification[key]) return;
+  exports[key] = _TableTopNotification[key];
+});
+var _TopNotificationRenderProp = require("./TopNotificationRenderProp");
+Object.keys(_TopNotificationRenderProp).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TopNotificationRenderProp[key]) return;
+  exports[key] = _TopNotificationRenderProp[key];
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_TableTopNotification","require","Object","keys","forEach","key","exports","_TopNotificationRenderProp"],"sources":["../../../../src/components/TableTopNotification/index.ts"],"sourcesContent":["export * from './TableTopNotification';\nexport * from './TopNotificationRenderProp';\n"],"mappings":";;;AAAA,IAAAA,qBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,qBAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,qBAAA,CAAAK,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAL,qBAAA,CAAAK,GAAA;AAAA;AACA,IAAAE,0BAAA,GAAAN,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAI,0BAAA,EAAAH,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAE,0BAAA,CAAAF,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAE,0BAAA,CAAAF,GAAA;AAAA"}

package/dist/cjs/components/TabsFilter/TabTitle.js

@@ -0,0 +1,84 @@
+"use strict";
+
+exports.__esModule = true;
+exports.TabTitle = void 0;
+var _designSystem = require("@wix/design-system");
+var _react = _interopRequireWildcard(require("react"));
+var _mobxReactLite = require("mobx-react-lite");
+var _TabsFilterStCss = require("./TabsFilter.st.css.js");
+var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/TabsFilter/TabTitle.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 _TabTitle({
+  tabIndex,
+  state,
+  text,
+  value,
+  counterBadge
+}) {
+  const badge = counterBadge == null ? void 0 : counterBadge(value);
+  const badgeRef = _react.default.useRef();
+  (0, _react.useEffect)(() => {
+    if (badgeRef.current) {
+      state.badges.set(tabIndex, badgeRef.current);
+    }
+    return () => {
+      state.badges.delete(tabIndex);
+    };
+  }, [badgeRef.current]);
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    className: (0, _TabsFilterStCss.st)(_TabsFilterStCss.classes.root),
+    dataHook: "tabs-filter-tab-title",
+    verticalAlign: "middle",
+    align: "center",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 36,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    maxWidth: state.itemMaxWidth,
+    flexShrink: 1,
+    minWidth: 0,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 42,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    className: (0, _TabsFilterStCss.st)(_TabsFilterStCss.classes.title),
+    dataHook: "title-text",
+    ellipsis: true,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 43,
+      columnNumber: 9
+    }
+  }, text)), badge && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    dataHook: "title-badge",
+    marginLeft: `${state.itemBadgeMargin}px`,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 48,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: node => {
+      if (node) {
+        badgeRef.current = node;
+      }
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 49,
+      columnNumber: 11
+    }
+  }, badge)));
+}
+const TabTitle = exports.TabTitle = (0, _mobxReactLite.observer)(_TabTitle);
+//# sourceMappingURL=TabTitle.js.map

package/dist/cjs/components/TabsFilter/TabTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_designSystem","require","_react","_interopRequireWildcard","_mobxReactLite","_TabsFilterStCss","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_TabTitle","tabIndex","state","text","value","counterBadge","badge","badgeRef","React","useRef","useEffect","current","badges","delete","createElement","Box","className","st","classes","root","dataHook","verticalAlign","align","__self","__source","fileName","lineNumber","columnNumber","maxWidth","itemMaxWidth","flexShrink","minWidth","Text","title","ellipsis","marginLeft","itemBadgeMargin","ref","node","TabTitle","exports","observer"],"sources":["../../../../src/components/TabsFilter/TabTitle.tsx"],"sourcesContent":["import { Box, Text } from '@wix/design-system';\nimport React, { useEffect, ReactNode } from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { TabsResponsiveState } from './TabsResponsiveState';\nimport { classes, st } from './TabsFilter.st.css.js';\n\nexport interface TabTitleProps<V> {\n  tabIndex: number;\n  state: TabsResponsiveState;\n  text?: string;\n  value: V | null | undefined;\n  counterBadge?: (value: V | null | undefined) => ReactNode;\n}\n\nfunction _TabTitle<V>({\n  tabIndex,\n  state,\n  text,\n  value,\n  counterBadge,\n}: TabTitleProps<V>) {\n  const badge = counterBadge?.(value);\n  const badgeRef = React.useRef<HTMLSpanElement>();\n\n  useEffect(() => {\n    if (badgeRef.current) {\n      state.badges.set(tabIndex, badgeRef.current);\n    }\n\n    return () => {\n      state.badges.delete(tabIndex);\n    };\n  }, [badgeRef.current]);\n\n  return (\n    <Box\n      className={st(classes.root)}\n      dataHook=\"tabs-filter-tab-title\"\n      verticalAlign=\"middle\"\n      align=\"center\"\n    >\n      <Box maxWidth={state.itemMaxWidth} flexShrink={1} minWidth={0}>\n        <Text className={st(classes.title)} dataHook=\"title-text\" ellipsis>\n          {text}\n        </Text>\n      </Box>\n      {badge && (\n        <Box dataHook=\"title-badge\" marginLeft={`${state.itemBadgeMargin}px`}>\n          <div\n            ref={(node) => {\n              if (node) {\n                badgeRef.current = node;\n              }\n            }}\n          >\n            {badge}\n          </div>\n        </Box>\n      )}\n    </Box>\n  );\n}\n\nexport const TabTitle = observer(_TabTitle);\n"],"mappings":"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"}

package/dist/cjs/components/TabsFilter/TabsDefault.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.TabsDefault = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _designSystem = require("@wix/design-system");
+var _mobxReactLite = require("mobx-react-lite");
+var _types = require("./types");
+var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/TabsFilter/TabsDefault.tsx";
+function _TabsDefault(props) {
+  const {
+    state,
+    filter,
+    selectedId,
+    items,
+    type,
+    onChange,
+    all
+  } = props;
+  const {
+    itemKey
+  } = filter;
+  const {
+    responsive
+  } = state;
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Tabs, {
+    minWidth: responsive.panelMinWidth,
+    dataHook: "tabs-default",
+    activeId: selectedId,
+    onClick: tab => {
+      const {
+        id
+      } = tab;
+      const activeId = filter.isEmpty ? _types.ALL_TAB_ITEM_ID : itemKey(filter.value[0]);
+      const prevTab = items.find(item => item.id === activeId);
+      const values = id === _types.ALL_TAB_ITEM_ID ? [] : [tab.value];
+      state._reportTabSelectedBiOnNextResult({
+        prevTab,
+        nextTab: tab,
+        items,
+        hasAllTab: all != null
+      });
+      onChange == null || onChange(values[0]);
+      filter.refresh(values);
+    },
+    type: type,
+    items: items,
+    hasDivider: false,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 5
+    }
+  });
+}
+const TabsDefault = exports.TabsDefault = (0, _mobxReactLite.observer)(_TabsDefault);
+//# sourceMappingURL=TabsDefault.js.map

package/dist/cjs/components/TabsFilter/TabsDefault.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_mobxReactLite","_types","_jsxFileName","_TabsDefault","props","state","filter","selectedId","items","type","onChange","all","itemKey","responsive","default","createElement","Tabs","minWidth","panelMinWidth","dataHook","activeId","onClick","tab","id","isEmpty","ALL_TAB_ITEM_ID","value","prevTab","find","item","values","_reportTabSelectedBiOnNextResult","nextTab","hasAllTab","refresh","hasDivider","__self","__source","fileName","lineNumber","columnNumber","TabsDefault","exports","observer"],"sources":["../../../../src/components/TabsFilter/TabsDefault.tsx"],"sourcesContent":["import React from 'react';\nimport { Tabs } from '@wix/design-system';\nimport { observer } from 'mobx-react-lite';\nimport { Filter, FiltersMap } from '@wix/bex-core';\nimport { ALL_TAB_ITEM_ID, TabsFilterItem, TabsFilterItemBase } from './types';\nimport { TabsFilterState } from './TabsFilterState';\n\nexport interface TabsDefaultProps<V, T, F extends FiltersMap> {\n  items: TabsFilterItemBase[];\n  data: V[];\n  filter: Filter<V[]>;\n  selectedId: string;\n  state: TabsFilterState<T, F>;\n  type?: 'uniformFull';\n  onChange?: (value: V | null | undefined) => unknown;\n  all?: string | null | false;\n}\n\nfunction _TabsDefault<V, T, F extends FiltersMap>(\n  props: TabsDefaultProps<V, T, F>,\n) {\n  const { state, filter, selectedId, items, type, onChange, all } = props;\n  const { itemKey } = filter;\n\n  const { responsive } = state;\n\n  return (\n    <Tabs\n      minWidth={responsive.panelMinWidth}\n      dataHook=\"tabs-default\"\n      activeId={selectedId}\n      onClick={(tab) => {\n        const { id } = tab as TabsFilterItemBase;\n        const activeId = filter.isEmpty\n          ? ALL_TAB_ITEM_ID\n          : itemKey(filter.value[0]);\n        const prevTab = items.find((item) => item.id === activeId);\n\n        const values =\n          id === ALL_TAB_ITEM_ID ? [] : [(tab as TabsFilterItem<V>).value];\n\n        state._reportTabSelectedBiOnNextResult({\n          prevTab,\n          nextTab: tab as TabsFilterItemBase,\n          items,\n          hasAllTab: all != null,\n        });\n        onChange?.(values[0]);\n        filter.refresh(values);\n      }}\n      type={type}\n      items={items}\n      hasDivider={false}\n    />\n  );\n}\n\nexport const TabsDefault = observer(_TabsDefault);\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AAEA,IAAAG,MAAA,GAAAH,OAAA;AAA8E,IAAAI,YAAA;AAc9E,SAASC,YAAYA,CACnBC,KAAgC,EAChC;EACA,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC,UAAU;IAAEC,KAAK;IAAEC,IAAI;IAAEC,QAAQ;IAAEC;EAAI,CAAC,GAAGP,KAAK;EACvE,MAAM;IAAEQ;EAAQ,CAAC,GAAGN,MAAM;EAE1B,MAAM;IAAEO;EAAW,CAAC,GAAGR,KAAK;EAE5B,oBACET,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAAChB,aAAA,CAAAiB,IAAI;IACHC,QAAQ,EAAEJ,UAAU,CAACK,aAAc;IACnCC,QAAQ,EAAC,cAAc;IACvBC,QAAQ,EAAEb,UAAW;IACrBc,OAAO,EAAGC,GAAG,IAAK;MAChB,MAAM;QAAEC;MAAG,CAAC,GAAGD,GAAyB;MACxC,MAAMF,QAAQ,GAAGd,MAAM,CAACkB,OAAO,GAC3BC,sBAAe,GACfb,OAAO,CAACN,MAAM,CAACoB,KAAK,CAAC,CAAC,CAAC,CAAC;MAC5B,MAAMC,OAAO,GAAGnB,KAAK,CAACoB,IAAI,CAAEC,IAAI,IAAKA,IAAI,CAACN,EAAE,KAAKH,QAAQ,CAAC;MAE1D,MAAMU,MAAM,GACVP,EAAE,KAAKE,sBAAe,GAAG,EAAE,GAAG,CAAEH,GAAG,CAAuBI,KAAK,CAAC;MAElErB,KAAK,CAAC0B,gCAAgC,CAAC;QACrCJ,OAAO;QACPK,OAAO,EAAEV,GAAyB;QAClCd,KAAK;QACLyB,SAAS,EAAEtB,GAAG,IAAI;MACpB,CAAC,CAAC;MACFD,QAAQ,YAARA,QAAQ,CAAGoB,MAAM,CAAC,CAAC,CAAC,CAAC;MACrBxB,MAAM,CAAC4B,OAAO,CAACJ,MAAM,CAAC;IACxB,CAAE;IACFrB,IAAI,EAAEA,IAAK;IACXD,KAAK,EAAEA,KAAM;IACb2B,UAAU,EAAE,KAAM;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAApC,YAAA;MAAAqC,UAAA;MAAAC,YAAA;IAAA;EAAA,CACnB,CAAC;AAEN;AAEO,MAAMC,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,IAAAE,uBAAQ,EAACxC,YAAY,CAAC"}

package/dist/cjs/components/TabsFilter/TabsDropdown.js

@@ -0,0 +1,107 @@
+"use strict";
+
+exports.__esModule = true;
+exports.TabsDropdown = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _designSystem = require("@wix/design-system");
+var _mobxReactLite = require("mobx-react-lite");
+var _ToolbarCollectionContext = require("../ToolbarCollectionContext");
+var _TabsFilterState = require("./TabsFilterState");
+var _TabTotal = require("../TabTotal");
+var _types = require("./types");
+var _SingleSelectFilterBase = require("../SingleSelectFilterBase");
+var _hooks = require("../../hooks");
+var _jsxFileName = "/home/builduser/work/db7ea24852bc3350/packages/cairo/dist/cjs/components/TabsFilter/TabsDropdown.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 _TabsDropdown(props) {
+  const {
+    data: dataProp,
+    items,
+    filter,
+    selectedId
+  } = props;
+  const {
+    itemKey
+  } = filter;
+  const table = (0, _ToolbarCollectionContext.useToolbarCollectionContext)();
+  const container = _react.default.useRef();
+  const [state] = (0, _react.useState)(() => new _TabsFilterState.TabsFilterState({
+    table
+  }));
+  (0, _react.useEffect)(() => state.init({
+    container: container.current,
+    itemsCount: items.length
+  }), []);
+  const options = _react.default.useMemo(() => items.map(item => (0, _designSystem.listItemSelectBuilder)({
+    id: item.id,
+    title: item.name,
+    label: item.name,
+    suffix: /*#__PURE__*/_react.default.createElement(_TabTotal.TabTotalDropdownOption, {
+      value: dataProp.find(data => itemKey(data) === item.id),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 52,
+        columnNumber: 13
+      }
+    })
+  })), [items]);
+  const {
+    dropdownSelect,
+    init
+  } = (0, _hooks.useDropdownSelectFilterState)({
+    filter
+  });
+  (0, _react.useEffect)(() => init(), []);
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    minWidth: 140,
+    maxWidth: 200,
+    paddingLeft: "SP4",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 68,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SingleSelectFilterBase.SingleSelectFilterBase, {
+    dataHook: "tabs-dropdown",
+    filter: filter,
+    dropdownSelect: dropdownSelect,
+    options: options,
+    disabled: !options.length,
+    selectedId: selectedId,
+    onSelect: option => {
+      const tab = items.find(item => item.id === option.id);
+      if (tab) {
+        const values = tab.id === _types.ALL_TAB_ITEM_ID ? [] : [tab.value];
+        filter.refresh(values);
+      }
+    },
+    suffix: /*#__PURE__*/_react.default.createElement(_designSystem.Input.Affix, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 89,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/_react.default.createElement(_TabTotal.TabTotalDropdownOption, {
+      key: selectedId,
+      value: dataProp.find(value => itemKey(value) === selectedId),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 90,
+        columnNumber: 13
+      }
+    })),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 69,
+      columnNumber: 7
+    }
+  }));
+}
+const TabsDropdown = exports.TabsDropdown = (0, _mobxReactLite.observer)(_TabsDropdown);
+//# sourceMappingURL=TabsDropdown.js.map