"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = exports.ScrollableScrollParent = exports.Scrollable = exports.DatePickers = exports.Comparison = exports.Basic = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _Box = _interopRequireDefault(require("../Box"));
var _PopoverNext = _interopRequireDefault(require("./PopoverNext"));
var _DatePicker = _interopRequireDefault(require("../DatePicker"));
var _2 = require("..");
var _PopoverNext2 = require("./PopoverNext.constants");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/PopoverNext/PopoverNext.story.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var _default = exports.default = {
  title: 'PopoverNext',
  component: _PopoverNext.default
};
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: 26,
      columnNumber: 5
    }
  }, /*#__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: 27,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement(_2.Popover.Element, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 33,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement("button", {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 34,
      columnNumber: 11
    }
  }, "Native button with old")), /*#__PURE__*/_react.default.createElement(_2.Popover.Content, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 36,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    padding: "10px",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 37,
      columnNumber: 11
    }
  }, "Content"))), /*#__PURE__*/_react.default.createElement(_PopoverNext.default, (0, _extends2.default)({}, common, {
    open: open,
    onOpenChange: (open, _) => setOpen(open),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 40,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Trigger, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 45,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement("button", {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 46,
      columnNumber: 11
    }
  }, "Native button with new")), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Content, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 48,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    padding: "10px",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 49,
      columnNumber: 11
    }
  }, "Content"))));
};
var ComparisonTemplate = () => {
  var [open, setOpen] = (0, _react.useState)(false);
  var common = {
    dynamicWidth: true,
    // minWidth: 300,
    // minWidth: 300,
    maxWidth: 300
  };
  var content = 'VEry super long content oh so long';
  var random = /*#__PURE__*/_react.default.createElement("div", {
    style: {
      minWidth: '400px',
      height: '10px',
      background: 'red'
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 69,
      columnNumber: 5
    }
  });
  return /*#__PURE__*/_react.default.createElement(_Box.default, {
    gap: 15,
    padding: 50,
    direction: "vertical",
    align: "center",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 73,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_PopoverNext.default, (0, _extends2.default)({
    open: open,
    onOpenChange: setOpen
  }, common, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 74,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Trigger, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 75,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement("button", {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 76,
      columnNumber: 11
    }
  }, "Native button with next")), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Content, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 78,
      columnNumber: 9
    }
  }, content, random)), /*#__PURE__*/_react.default.createElement(_2.Popover, (0, _extends2.default)({
    shown: true
  }, common, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 83,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement(_2.Popover.Element, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 84,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement("button", {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 85,
      columnNumber: 11
    }
  }, "Native button with old")), /*#__PURE__*/_react.default.createElement(_2.Popover.Content, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 87,
      columnNumber: 9
    }
  }, content, random)));
};
var commonDatePickerProps = {
  onChange: () => {},
  width: 200,
  rtl: false,
  // popvoer should be placed on the right

  popoverProps: {
    appendTo: 'parent',
    dynamicWidth: true,
    // excludeClass: 'excludeClass',
    // flip: false,
    // fixed: false,
    // placement: 'top',
    // hideDelay: 0,
    // moveArrowTo: 0,
    // onMouseEnter: () => {},
    // onMouseLeave: () => {},
    // placement: 'top',
    // showDelay: 0,
    // timeout: 0,
    // maxWidth: 0,
    // minWidth: 0,
    // width: undefined,
    zIndex: 1000
  }
};
var DatePickersTemplate = () => /*#__PURE__*/_react.default.createElement(_Box.default, {
  gap: 2,
  paddingTop: 50,
  paddingLeft: 50,
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 123,
    columnNumber: 3
  }
}, /*#__PURE__*/_react.default.createElement(_DatePicker.default, (0, _extends2.default)({
  placeholderText: "old"
}, commonDatePickerProps, {
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 124,
    columnNumber: 5
  }
})));
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: 137,
      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: 145,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      padding: '25px 25px 150px'
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 154,
      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: 155,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_2.Popover, (0, _extends2.default)({
    shown: true,
    showArrow: true
  }, sameProps, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 162,
      columnNumber: 13
    }
  }), /*#__PURE__*/_react.default.createElement(_2.Popover.Element, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 163,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement("button", {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 164,
      columnNumber: 17
    }
  }, "I am an plain Button")), /*#__PURE__*/_react.default.createElement(_2.Popover.Content, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 166,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    padding: "12px 24px",
    width: 140,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 167,
      columnNumber: 17
    }
  }, "Old popover Content"))), /*#__PURE__*/_react.default.createElement(_PopoverNext.default, (0, _extends2.default)({}, sameProps, {
    open: true,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 173,
      columnNumber: 13
    }
  }), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Trigger, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 174,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement("button", {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 175,
      columnNumber: 17
    }
  }, "Popover trigger")), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Content, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 177,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    padding: "12px 24px",
    width: 140,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 178,
      columnNumber: 17
    }
  }, "New popover Content")))))));
};
var ScrollableTemplate = () => /*#__PURE__*/_react.default.createElement(ScrollableContent, {
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 191,
    columnNumber: 3
  }
});
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: 196,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": "scrollable",
    style: {
      overflow: 'auto',
      height
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 203,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      padding: '15px 25px 25px'
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 210,
      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: 211,
      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: 237,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(ScrollableWrapper, {
    height: HEIGHT,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 238,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_PopoverNext.default, (0, _extends2.default)({}, commonProps, {
    open: true,
    onOpenChange: () => {},
    focusManagerEnabled: false,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 239,
      columnNumber: 9
    }
  }), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Trigger, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 245,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement("button", {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 246,
      columnNumber: 13
    }
  }, "Popover trigger")), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Content, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 248,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    padding: "30px",
    backgroundColor: "pink",
    borderRadius: "inherit",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 249,
      columnNumber: 13
    }
  }, "Content")))), /*#__PURE__*/_react.default.createElement(ScrollableWrapper, {
    height: HEIGHT,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 256,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_2.Popover, (0, _extends2.default)({}, commonProps, {
    shown: true,
    onShow: () => {},
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 257,
      columnNumber: 9
    }
  }), /*#__PURE__*/_react.default.createElement(_2.Popover.Element, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 262,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement("button", {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 263,
      columnNumber: 13
    }
  }, "Popover trigger")), /*#__PURE__*/_react.default.createElement(_2.Popover.Content, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 265,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    padding: "30px",
    backgroundColor: "pink",
    borderRadius: "inherit",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 266,
      columnNumber: 13
    }
  }, "Content")))));
};
var ScrollableScrollParentTemplate = () => /*#__PURE__*/_react.default.createElement(ScrollableContainer, {
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 278,
    columnNumber: 11
  }
});
var Basic = exports.Basic = {
  render: () => /*#__PURE__*/_react.default.createElement(Template, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 281,
      columnNumber: 17
    }
  })
};
Basic.args = {};
var Comparison = exports.Comparison = {
  render: () => /*#__PURE__*/_react.default.createElement(ComparisonTemplate, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 286,
      columnNumber: 17
    }
  })
};
Comparison.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