@wix/design-system 1.158.0 → 1.159.0

package/dist/cjs/PopoverNext/PopoverNext.story.js

@@ -2,146 +2,109 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.default = exports.Scrollable = exports.DatePickers = exports.Comparision = exports.Basic = void 0;
+exports.default = exports.ScrollableScrollParent = exports.Scrollable = exports.DatePickers = exports.Comparision = exports.Basic = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _Box = _interopRequireDefault(require("../Box"));
 var _PopoverNext = _interopRequireDefault(require("./PopoverNext"));
 var _DatePickerNext = _interopRequireDefault(require("./components/DatePickerNext/DatePickerNext"));
 var _DatePicker = _interopRequireDefault(require("../DatePicker"));
-var _ = require("..");
+var _2 = require("..");
+var _PopoverNext2 = require("./PopoverNext.constants");
 var _jsxFileName = "/home/builduser/work/b60d7defec63c7cc/packages/wix-design-system/dist/cjs/PopoverNext/PopoverNext.story.tsx";
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && {}.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; }
 var _default = exports.default = {
   title: 'PopoverNext',
   component: _PopoverNext.default
 };
-var commonProps = {
-  dataHook: 'popover',
-  children: [/*#__PURE__*/_react.default.createElement(_PopoverNext.default.Trigger, {
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 19,
-      columnNumber: 5
-    }
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 20,
-      columnNumber: 7
-    }
-  }, "Popover trigger")), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Content, {
+var Template = () => {
+  var [shownOld, setShownOld] = (0, _react.useState)(false);
+  var [open, setOpen] = (0, _react.useState)(false);
+  var common = {
+    showDelay: 500,
+    hideDelay: 1000,
+    timeout: 2000
+  };
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    gap: 8,
+    padding: 50,
+    direction: "vertical",
+    align: "center",
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 22,
+      lineNumber: 27,
       columnNumber: 5
     }
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
-    padding: "10px",
+  }, /*#__PURE__*/_react.default.createElement(_2.Popover, (0, _extends2.default)({
+    shown: shownOld,
+    onClick: () => setShownOld(true),
+    onClickOutside: () => setShownOld(false)
+  }, common, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 23,
+      lineNumber: 28,
       columnNumber: 7
     }
-  }, "Content"))]
-};
-var ScrollableContent = props => {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      marginTop: '100px',
-      overflow: 'hidden',
-      position: 'relative',
-      border: '1px solid black'
-    },
+  }), /*#__PURE__*/_react.default.createElement(_2.Popover.Element, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 30,
-      columnNumber: 5
+      lineNumber: 34,
+      columnNumber: 9
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    "data-hook": "scrollable",
-    style: {
-      overflow: 'auto',
-      height: '100px'
-    },
+  }, /*#__PURE__*/_react.default.createElement("button", {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 38,
-      columnNumber: 7
+      lineNumber: 35,
+      columnNumber: 11
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      padding: '25px 25px 150px'
-    },
+  }, "Native button with old")), /*#__PURE__*/_react.default.createElement(_2.Popover.Content, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 45,
+      lineNumber: 37,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_Box.default, {
-    width: "250px",
-    overflow: "hidden",
-    border: "solid 1px black",
-    padding: "50px",
+    padding: "10px",
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 46,
+      lineNumber: 38,
       columnNumber: 11
     }
-  }, /*#__PURE__*/_react.default.createElement(_PopoverNext.default, (0, _extends2.default)({}, props, {
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 52,
-      columnNumber: 13
-    }
-  }))))));
-};
-var Template = () => {
-  return /*#__PURE__*/_react.default.createElement(_Box.default, {
-    gap: 5,
-    padding: 50,
-    direction: "vertical",
-    align: "center",
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 62,
-      columnNumber: 5
-    }
-  }, /*#__PURE__*/_react.default.createElement(_PopoverNext.default, {
+  }, "Content"))), /*#__PURE__*/_react.default.createElement(_PopoverNext.default, (0, _extends2.default)({}, common, {
+    open: open,
+    onOpenChange: (open, _) => setOpen(open),
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 63,
+      lineNumber: 41,
       columnNumber: 7
     }
-  }, /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Trigger, {
+  }), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Trigger, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 64,
+      lineNumber: 46,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement("button", {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 65,
+      lineNumber: 47,
       columnNumber: 11
     }
-  }, "Native button")), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Content, {
+  }, "Native button with new")), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Content, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 67,
+      lineNumber: 49,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_Box.default, {
@@ -149,12 +112,13 @@ var Template = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 68,
+      lineNumber: 50,
       columnNumber: 11
     }
   }, "Content"))));
 };
 var ComparisionTemplate = () => {
+  var [open, setOpen] = (0, _react.useState)(false);
   var common = {
     dynamicWidth: true,
     // minWidth: 300,
@@ -171,7 +135,7 @@ var ComparisionTemplate = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 86,
+      lineNumber: 70,
       columnNumber: 5
     }
   });
@@ -183,67 +147,68 @@ var ComparisionTemplate = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 90,
+      lineNumber: 74,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_PopoverNext.default, (0, _extends2.default)({
-    open: true
+    open: open,
+    onOpenChange: setOpen
   }, common, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 91,
+      lineNumber: 75,
       columnNumber: 7
     }
   }), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Trigger, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 92,
+      lineNumber: 76,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement("button", {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 93,
+      lineNumber: 77,
       columnNumber: 11
     }
   }, "Native button with next")), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Content, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 95,
+      lineNumber: 79,
       columnNumber: 9
     }
-  }, content, random)), /*#__PURE__*/_react.default.createElement(_.Popover, (0, _extends2.default)({
+  }, content, random)), /*#__PURE__*/_react.default.createElement(_2.Popover, (0, _extends2.default)({
     shown: true
   }, common, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 100,
+      lineNumber: 84,
       columnNumber: 7
     }
-  }), /*#__PURE__*/_react.default.createElement(_.Popover.Element, {
+  }), /*#__PURE__*/_react.default.createElement(_2.Popover.Element, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 101,
+      lineNumber: 85,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement("button", {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 102,
+      lineNumber: 86,
       columnNumber: 11
     }
-  }, "Native button with old")), /*#__PURE__*/_react.default.createElement(_.Popover.Content, {
+  }, "Native button with old")), /*#__PURE__*/_react.default.createElement(_2.Popover.Content, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 104,
+      lineNumber: 88,
       columnNumber: 9
     }
   }, content, random)));
@@ -258,11 +223,11 @@ var commonDatePickerProps = {
     appendTo: 'parent',
     dynamicWidth: true,
     // excludeClass: 'excludeClass',
-    // flip: true,
+    // flip: false,
     // fixed: false,
+    // placement: 'top',
     // hideDelay: 0,
     // moveArrowTo: 0,
-    // moveBy: { x: 0, y: 0 },
     // onMouseEnter: () => {},
     // onMouseLeave: () => {},
     // placement: 'top',
@@ -270,7 +235,7 @@ var commonDatePickerProps = {
     // timeout: 0,
     // maxWidth: 0,
     // minWidth: 0,
-    width: undefined,
+    // width: undefined,
     zIndex: 1000
   }
 };
@@ -283,7 +248,7 @@ var DatePickersTemplate = () => /*#__PURE__*/_react.default.createElement(_Box.d
   __self: void 0,
   __source: {
     fileName: _jsxFileName,
-    lineNumber: 141,
+    lineNumber: 125,
     columnNumber: 3
   }
 }, /*#__PURE__*/_react.default.createElement(_DatePicker.default, (0, _extends2.default)({
@@ -292,7 +257,7 @@ var DatePickersTemplate = () => /*#__PURE__*/_react.default.createElement(_Box.d
   __self: void 0,
   __source: {
     fileName: _jsxFileName,
-    lineNumber: 142,
+    lineNumber: 126,
     columnNumber: 5
   }
 })), /*#__PURE__*/_react.default.createElement(_DatePickerNext.default, (0, _extends2.default)({
@@ -301,25 +266,357 @@ var DatePickersTemplate = () => /*#__PURE__*/_react.default.createElement(_Box.d
   __self: void 0,
   __source: {
     fileName: _jsxFileName,
-    lineNumber: 143,
+    lineNumber: 127,
     columnNumber: 5
   }
 })));
-var ScrollableTemplate = () => /*#__PURE__*/_react.default.createElement(ScrollableContent, (0, _extends2.default)({}, commonProps, {
-  appendTo: "window",
+var ScrollableContent = () => {
+  var sameProps = {
+    placement: 'top',
+    fixed: false,
+    flip: false,
+    appendTo: _PopoverNext2.APPEND_TO.scrollParent
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-hook": "parent-of-scrollable",
+    style: {
+      marginTop: '100px',
+      position: 'relative',
+      border: '1px solid black'
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 140,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-hook": "scrollable",
+    style: {
+      overflow: 'auto',
+      position: 'relative',
+      height: '200px',
+      border: '1px solid green'
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 148,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '25px 25px 150px'
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 157,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    width: "350px",
+    border: "solid 1px red",
+    padding: "60px",
+    height: 160,
+    gap: 8,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 158,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_2.Popover, (0, _extends2.default)({
+    shown: true,
+    showArrow: true
+  }, sameProps, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 165,
+      columnNumber: 13
+    }
+  }), /*#__PURE__*/_react.default.createElement(_2.Popover.Element, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 166,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 167,
+      columnNumber: 17
+    }
+  }, "I am an plain Button")), /*#__PURE__*/_react.default.createElement(_2.Popover.Content, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 169,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    padding: "12px 24px",
+    width: 140,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 170,
+      columnNumber: 17
+    }
+  }, "Old popover Content"))), /*#__PURE__*/_react.default.createElement(_PopoverNext.default, (0, _extends2.default)({}, sameProps, {
+    open: true,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 176,
+      columnNumber: 13
+    }
+  }), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Trigger, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 177,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 178,
+      columnNumber: 17
+    }
+  }, "Popover trigger")), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Content, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 180,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    padding: "12px 24px",
+    width: 140,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 181,
+      columnNumber: 17
+    }
+  }, "New popover Content")))))));
+};
+var ScrollableTemplate = () => /*#__PURE__*/_react.default.createElement(ScrollableContent, {
   __self: void 0,
   __source: {
     fileName: _jsxFileName,
-    lineNumber: 148,
+    lineNumber: 194,
     columnNumber: 3
   }
-}));
-var Basic = exports.Basic = Template.bind({});
+});
+var ScrollableWrapper = _ref => {
+  var {
+    children,
+    height
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      overflow: 'hidden',
+      position: 'relative',
+      border: '1px solid black'
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 199,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-hook": "scrollable",
+    style: {
+      overflow: 'auto',
+      height
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 206,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '15px 25px 25px'
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 213,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    width: "150px",
+    overflow: "hidden",
+    border: "solid 1px black",
+    padding: "30px",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 214,
+      columnNumber: 11
+    }
+  }, children))));
+};
+var ScrollableContainer = () => {
+  var HEIGHT = '50px';
+  var commonProps = {
+    placement: 'bottom',
+    fixed: true,
+    flip: true,
+    appendTo: 'scrollParent',
+    dataHook: 'popover'
+  };
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    gap: 3,
+    direction: "vertical",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 240,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(ScrollableWrapper, {
+    height: HEIGHT,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 241,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_PopoverNext.default, (0, _extends2.default)({}, commonProps, {
+    open: true,
+    onOpenChange: () => {},
+    focusManagerEnabled: false,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 242,
+      columnNumber: 9
+    }
+  }), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Trigger, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 248,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 249,
+      columnNumber: 13
+    }
+  }, "Popover trigger")), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Content, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 251,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    padding: "30px",
+    backgroundColor: "pink",
+    borderRadius: "inherit",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 252,
+      columnNumber: 13
+    }
+  }, "Content")))), /*#__PURE__*/_react.default.createElement(ScrollableWrapper, {
+    height: HEIGHT,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 259,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_2.Popover, (0, _extends2.default)({}, commonProps, {
+    shown: true,
+    onShow: () => {},
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 260,
+      columnNumber: 9
+    }
+  }), /*#__PURE__*/_react.default.createElement(_2.Popover.Element, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 265,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 266,
+      columnNumber: 13
+    }
+  }, "Popover trigger")), /*#__PURE__*/_react.default.createElement(_2.Popover.Content, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 268,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    padding: "30px",
+    backgroundColor: "pink",
+    borderRadius: "inherit",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 269,
+      columnNumber: 13
+    }
+  }, "Content")))));
+};
+var ScrollableScrollParentTemplate = () => /*#__PURE__*/_react.default.createElement(ScrollableContainer, {
+  __self: void 0,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 281,
+    columnNumber: 11
+  }
+});
+var Basic = exports.Basic = {
+  render: () => /*#__PURE__*/_react.default.createElement(Template, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 284,
+      columnNumber: 17
+    }
+  })
+};
 Basic.args = {};
-var Comparision = exports.Comparision = ComparisionTemplate.bind({});
+var Comparision = exports.Comparision = {
+  render: () => /*#__PURE__*/_react.default.createElement(ComparisionTemplate, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 289,
+      columnNumber: 17
+    }
+  })
+};
 Comparision.args = {};
 var DatePickers = exports.DatePickers = DatePickersTemplate.bind({});
 DatePickers.args = {};
 var Scrollable = exports.Scrollable = ScrollableTemplate.bind({});
 Scrollable.args = {};
+var ScrollableScrollParent = exports.ScrollableScrollParent = ScrollableScrollParentTemplate.bind({});
+ScrollableScrollParent.args = {};
 //# sourceMappingURL=PopoverNext.story.js.map