"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.withTitleSubtitle = exports.withTitle = exports.withSplitButtonMenu = exports.withMenu = exports.withCloseButton = exports.withActions = exports.experiment2 = exports.experiment1 = exports.default = exports.basic = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _utils = require("../../../.storybook/utils");

var _uiIcons = require("@teamleader/ui-icons");

var _index = require("../../index");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var backdrops = ['transparent', 'dark'];
var defaultPopoverProps = {
  backdrop: 'transparent',
  color: 'neutral',
  direction: 'south',
  fullHeight: true,
  position: 'center',
  tint: 'lightest',
  lockScroll: true,
  maxWidth: '50vw',
  minWidth: '',
  offsetCorrection: 0
};
var popoverArgTypes = {
  backdrop: {
    control: 'select',
    options: backdrops
  }
};

var contentBoxWithSingleTextLine = /*#__PURE__*/_react.default.createElement(_index.Box, {
  padding: 4
}, /*#__PURE__*/_react.default.createElement(_index.TextBody, null, "This is the popover content with a", ' ', /*#__PURE__*/_react.default.createElement(_index.Link, {
  href: "#",
  inherit: false
}, "link"), ' ', "inside"));

var _default = {
  component: _index.Popover,
  title: (0, _utils.addStoryInGroup)(_utils.MID_LEVEL_BLOCKS, 'Popover'),
  parameters: {
    info: {
      propTablesExclude: [_index.Link, _index.TextBody, _index.TextSmall, _index.Button, _index.Banner, _index.Heading3, _index.ButtonGroup, _index.Box]
    }
  }
};
exports.default = _default;

var usePopoverTrigger = function usePopoverTrigger() {
  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      popoverActive = _useState2[0],
      setPopoverActive = _useState2[1];

  var _useState3 = (0, _react.useState)(undefined),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      anchorEl = _useState4[0],
      setAnchorEl = _useState4[1];

  var triggerPopover = function triggerPopover(event) {
    setAnchorEl(event.currentTarget);
    setPopoverActive(true);
  };

  var closePopover = function closePopover() {
    setPopoverActive(false);
  };

  return [{
    popoverActive: popoverActive,
    anchorEl: anchorEl
  }, triggerPopover, closePopover];
};

var basic = function basic(args) {
  var _usePopoverTrigger = usePopoverTrigger(),
      _usePopoverTrigger2 = (0, _slicedToArray2.default)(_usePopoverTrigger, 3),
      _usePopoverTrigger2$ = _usePopoverTrigger2[0],
      popoverActive = _usePopoverTrigger2$.popoverActive,
      anchorEl = _usePopoverTrigger2$.anchorEl,
      handleButtonClick = _usePopoverTrigger2[1],
      handleCloseClick = _usePopoverTrigger2[2];

  return /*#__PURE__*/_react.default.createElement(_index.Box, {
    display: "flex",
    justifyContent: "center"
  }, /*#__PURE__*/_react.default.createElement(_index.Button, {
    onClick: handleButtonClick,
    label: "Open a basic Popover"
  }), /*#__PURE__*/_react.default.createElement(_index.Popover, (0, _extends2.default)({}, args, {
    active: popoverActive,
    anchorEl: anchorEl,
    onEscKeyDown: handleCloseClick,
    onOverlayClick: handleCloseClick
  }), contentBoxWithSingleTextLine));
};

exports.basic = basic;
basic.args = defaultPopoverProps;
basic.argTypes = popoverArgTypes;

var withTitle = function withTitle(args) {
  var _usePopoverTrigger3 = usePopoverTrigger(),
      _usePopoverTrigger4 = (0, _slicedToArray2.default)(_usePopoverTrigger3, 3),
      _usePopoverTrigger4$ = _usePopoverTrigger4[0],
      popoverActive = _usePopoverTrigger4$.popoverActive,
      anchorEl = _usePopoverTrigger4$.anchorEl,
      handleButtonClick = _usePopoverTrigger4[1],
      handleCloseClick = _usePopoverTrigger4[2];

  return /*#__PURE__*/_react.default.createElement(_index.Box, {
    display: "flex",
    justifyContent: "center"
  }, /*#__PURE__*/_react.default.createElement(_index.Button, {
    onClick: handleButtonClick,
    label: "Open titled Popover"
  }), /*#__PURE__*/_react.default.createElement(_index.Popover, (0, _extends2.default)({}, args, {
    active: popoverActive,
    anchorEl: anchorEl,
    onEscKeyDown: handleCloseClick,
    onOverlayClick: handleCloseClick
  }), /*#__PURE__*/_react.default.createElement(_index.Banner, {
    fullWidth: true
  }, /*#__PURE__*/_react.default.createElement(_index.Heading3, null, "Popover Title")), contentBoxWithSingleTextLine));
};

exports.withTitle = withTitle;
withTitle.storyName = 'With title';
withTitle.args = defaultPopoverProps;
withTitle.argTypes = popoverArgTypes;

var withTitleSubtitle = function withTitleSubtitle(args) {
  var _usePopoverTrigger5 = usePopoverTrigger(),
      _usePopoverTrigger6 = (0, _slicedToArray2.default)(_usePopoverTrigger5, 3),
      _usePopoverTrigger6$ = _usePopoverTrigger6[0],
      popoverActive = _usePopoverTrigger6$.popoverActive,
      anchorEl = _usePopoverTrigger6$.anchorEl,
      handleButtonClick = _usePopoverTrigger6[1],
      handleCloseClick = _usePopoverTrigger6[2];

  return /*#__PURE__*/_react.default.createElement(_index.Box, {
    display: "flex",
    justifyContent: "center"
  }, /*#__PURE__*/_react.default.createElement(_index.Button, {
    onClick: handleButtonClick,
    label: "Open titled & subtitled Popover"
  }), /*#__PURE__*/_react.default.createElement(_index.Popover, (0, _extends2.default)({}, args, {
    active: popoverActive,
    anchorEl: anchorEl,
    onEscKeyDown: handleCloseClick,
    onOverlayClick: handleCloseClick
  }), /*#__PURE__*/_react.default.createElement(_index.Banner, {
    color: "neutral",
    fullWidth: true
  }, /*#__PURE__*/_react.default.createElement(_index.Heading3, null, "Popover Title"), /*#__PURE__*/_react.default.createElement(_index.TextSmall, {
    marginTop: 1
  }, "This is the popover content")), contentBoxWithSingleTextLine));
};

exports.withTitleSubtitle = withTitleSubtitle;
withTitleSubtitle.storyName = 'With title & subtitle';
withTitleSubtitle.args = defaultPopoverProps;
withTitleSubtitle.argTypes = popoverArgTypes;

var withCloseButton = function withCloseButton(args) {
  var _usePopoverTrigger7 = usePopoverTrigger(),
      _usePopoverTrigger8 = (0, _slicedToArray2.default)(_usePopoverTrigger7, 3),
      _usePopoverTrigger8$ = _usePopoverTrigger8[0],
      popoverActive = _usePopoverTrigger8$.popoverActive,
      anchorEl = _usePopoverTrigger8$.anchorEl,
      handleButtonClick = _usePopoverTrigger8[1],
      handleCloseClick = _usePopoverTrigger8[2];

  return /*#__PURE__*/_react.default.createElement(_index.Box, {
    display: "flex",
    justifyContent: "center"
  }, /*#__PURE__*/_react.default.createElement(_index.Button, {
    onClick: handleButtonClick,
    label: "Open Popover with close button"
  }), /*#__PURE__*/_react.default.createElement(_index.Popover, (0, _extends2.default)({}, args, {
    active: popoverActive,
    anchorEl: anchorEl,
    onEscKeyDown: handleCloseClick,
    onOverlayClick: handleCloseClick
  }), /*#__PURE__*/_react.default.createElement(_index.Banner, {
    onClose: handleCloseClick,
    fullWidth: true
  }, /*#__PURE__*/_react.default.createElement(_index.Heading3, null, "I am a heading 3")), contentBoxWithSingleTextLine));
};

exports.withCloseButton = withCloseButton;
withCloseButton.storyName = 'With close button';
withCloseButton.args = defaultPopoverProps;
withCloseButton.argTypes = popoverArgTypes;

var withActions = function withActions(args) {
  var _usePopoverTrigger9 = usePopoverTrigger(),
      _usePopoverTrigger10 = (0, _slicedToArray2.default)(_usePopoverTrigger9, 3),
      _usePopoverTrigger10$ = _usePopoverTrigger10[0],
      popoverActive = _usePopoverTrigger10$.popoverActive,
      anchorEl = _usePopoverTrigger10$.anchorEl,
      handleButtonClick = _usePopoverTrigger10[1],
      handleCloseClick = _usePopoverTrigger10[2];

  return /*#__PURE__*/_react.default.createElement(_index.Box, {
    display: "flex",
    justifyContent: "center"
  }, /*#__PURE__*/_react.default.createElement(_index.Button, {
    onClick: handleButtonClick,
    label: "Open Popover with actions"
  }), /*#__PURE__*/_react.default.createElement(_index.Popover, (0, _extends2.default)({}, args, {
    active: popoverActive,
    anchorEl: anchorEl,
    onEscKeyDown: handleCloseClick,
    onOverlayClick: handleCloseClick
  }), contentBoxWithSingleTextLine, /*#__PURE__*/_react.default.createElement(_index.ButtonGroup, {
    justifyContent: "flex-end",
    padding: 4
  }, /*#__PURE__*/_react.default.createElement(_index.Button, {
    label: "Cancel"
  }), /*#__PURE__*/_react.default.createElement(_index.Button, {
    level: "primary",
    label: "Confirm"
  }))));
};

exports.withActions = withActions;
withActions.storyName = 'With actions';
withActions.args = defaultPopoverProps;
withActions.argTypes = popoverArgTypes;

var withMenu = function withMenu(args) {
  var _usePopoverTrigger11 = usePopoverTrigger(),
      _usePopoverTrigger12 = (0, _slicedToArray2.default)(_usePopoverTrigger11, 3),
      _usePopoverTrigger12$ = _usePopoverTrigger12[0],
      popoverActive = _usePopoverTrigger12$.popoverActive,
      anchorEl = _usePopoverTrigger12$.anchorEl,
      handleButtonClick = _usePopoverTrigger12[1],
      handleCloseClick = _usePopoverTrigger12[2];

  return /*#__PURE__*/_react.default.createElement(_index.Box, {
    display: "flex",
    justifyContent: "center"
  }, /*#__PURE__*/_react.default.createElement(_index.Button, {
    onClick: handleButtonClick,
    label: "Open Popover with menu"
  }), /*#__PURE__*/_react.default.createElement(_index.Popover, (0, _extends2.default)({}, args, {
    active: popoverActive,
    anchorEl: anchorEl,
    onEscKeyDown: handleCloseClick,
    onOverlayClick: handleCloseClick
  }), /*#__PURE__*/_react.default.createElement(_index.Box, {
    overflowY: "auto"
  }, /*#__PURE__*/_react.default.createElement(_index.Menu, {
    outline: false,
    selected: "bar"
  }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
    value: "foo",
    label: "Foo label"
  }), /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
    value: "bar",
    label: "Bar label"
  }), /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
    label: "Disabled ...",
    disabled: true
  }), /*#__PURE__*/_react.default.createElement(_index.MenuDivider, null), /*#__PURE__*/_react.default.createElement(_index.MenuTitle, null, "Group title"), /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
    label: "Label & icon",
    icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconClockSmallOutline, null)
  }), /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
    label: "Destructive",
    icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconTrashSmallOutline, null),
    destructive: true
  }), /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
    label: "Destructive & disabled",
    icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconCloseSmallOutline, null),
    destructive: true,
    disabled: true
  })))));
};

exports.withMenu = withMenu;
withMenu.storyName = 'With menu';
withMenu.args = defaultPopoverProps;
withMenu.argTypes = popoverArgTypes;

var withSplitButtonMenu = function withSplitButtonMenu(args) {
  var _useState5 = (0, _react.useState)('primary'),
      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
      buttonLevel = _useState6[0],
      setButtonLevel = _useState6[1];

  var _useState7 = (0, _react.useState)('Primary action'),
      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
      buttonLabel = _useState8[0],
      setButtonLabel = _useState8[1];

  var _useState9 = (0, _react.useState)(null),
      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
      anchorEl = _useState10[0],
      setAnchorEl = _useState10[1];

  var _useState11 = (0, _react.useState)(false),
      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
      popoverActive = _useState12[0],
      setPopoverActive = _useState12[1];

  var _useState13 = (0, _react.useState)('foo'),
      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
      splitButtonSelected = _useState14[0],
      setSplitButtonSelected = _useState14[1];

  var handleSplitButtonNormalMenuItemClick = function handleSplitButtonNormalMenuItemClick() {
    setButtonLevel('primary');
    setButtonLabel('Primary action');
    setPopoverActive(false);
    setSplitButtonSelected('foo');
  };

  var handleSplitButtonDestructiveMenuItemClick = function handleSplitButtonDestructiveMenuItemClick() {
    setButtonLevel('destructive');
    setButtonLabel('Destructive action');
    setPopoverActive(false);
    setSplitButtonSelected('bar');
  };

  var handleButtonClick = function handleButtonClick(event) {
    setAnchorEl(event.currentTarget);
    setPopoverActive(true);
  };

  var handleCloseClick = function handleCloseClick() {
    setPopoverActive(false);
  };

  return /*#__PURE__*/_react.default.createElement(_index.Box, {
    display: "flex",
    justifyContent: "center"
  }, /*#__PURE__*/_react.default.createElement(_index.ButtonGroup, {
    segmented: true
  }, /*#__PURE__*/_react.default.createElement(_index.Button, {
    label: buttonLabel,
    level: buttonLevel
  }), /*#__PURE__*/_react.default.createElement(_index.Button, {
    level: buttonLevel,
    onClick: handleButtonClick,
    icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronDownSmallOutline, null)
  })), /*#__PURE__*/_react.default.createElement(_index.Popover, (0, _extends2.default)({}, args, {
    active: popoverActive,
    anchorEl: anchorEl,
    backdrop: "transparent",
    position: "start",
    onEscKeyDown: handleCloseClick,
    onOverlayClick: handleCloseClick
  }), /*#__PURE__*/_react.default.createElement(_index.Menu, {
    outline: false,
    selected: splitButtonSelected
  }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
    value: "foo",
    label: "Primary action",
    icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconClockSmallOutline, null),
    onClick: handleSplitButtonNormalMenuItemClick
  }), /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
    value: "bar",
    label: "Destructive action",
    icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconTrashSmallOutline, null),
    destructive: true,
    onClick: handleSplitButtonDestructiveMenuItemClick
  }))));
};

exports.withSplitButtonMenu = withSplitButtonMenu;
withSplitButtonMenu.storyName = 'With split button menu';
withSplitButtonMenu.args = defaultPopoverProps;
withSplitButtonMenu.argTypes = popoverArgTypes;

var experiment1 = function experiment1(args) {
  var _usePopoverTrigger13 = usePopoverTrigger(),
      _usePopoverTrigger14 = (0, _slicedToArray2.default)(_usePopoverTrigger13, 3),
      _usePopoverTrigger14$ = _usePopoverTrigger14[0],
      popoverActive = _usePopoverTrigger14$.popoverActive,
      anchorEl = _usePopoverTrigger14$.anchorEl,
      handleButtonClick = _usePopoverTrigger14[1],
      handleCloseClick = _usePopoverTrigger14[2];

  return /*#__PURE__*/_react.default.createElement(_index.Box, {
    display: "flex",
    justifyContent: "center"
  }, /*#__PURE__*/_react.default.createElement(_index.Button, {
    onClick: handleButtonClick,
    label: "Open a experimental Popover"
  }), /*#__PURE__*/_react.default.createElement(_index.Popover, (0, _extends2.default)({}, args, {
    active: popoverActive,
    anchorEl: anchorEl,
    onEscKeyDown: handleCloseClick,
    onOverlayClick: handleCloseClick
  }), /*#__PURE__*/_react.default.createElement(_index.Banner, {
    color: "neutral",
    fullWidth: true
  }, /*#__PURE__*/_react.default.createElement(_index.Heading3, null, "Popover Title"), /*#__PURE__*/_react.default.createElement(_index.TextSmall, {
    marginTop: 1
  }, "This is the popover content")), /*#__PURE__*/_react.default.createElement(_index.Box, {
    padding: 4,
    overflow: "auto"
  }, /*#__PURE__*/_react.default.createElement(_index.TextBody, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."))));
};

exports.experiment1 = experiment1;
experiment1.args = defaultPopoverProps;
experiment1.argTypes = popoverArgTypes;

var experiment2 = function experiment2(args) {
  var _usePopoverTrigger15 = usePopoverTrigger(),
      _usePopoverTrigger16 = (0, _slicedToArray2.default)(_usePopoverTrigger15, 3),
      _usePopoverTrigger16$ = _usePopoverTrigger16[0],
      popoverActive = _usePopoverTrigger16$.popoverActive,
      anchorEl = _usePopoverTrigger16$.anchorEl,
      handleButtonClick = _usePopoverTrigger16[1],
      handleCloseClick = _usePopoverTrigger16[2];

  return /*#__PURE__*/_react.default.createElement(_index.Box, {
    display: "flex",
    justifyContent: "center"
  }, /*#__PURE__*/_react.default.createElement(_index.Button, {
    onClick: handleButtonClick,
    label: "Open a experimental Popover"
  }), /*#__PURE__*/_react.default.createElement(_index.Popover, (0, _extends2.default)({}, args, {
    active: popoverActive,
    anchorEl: anchorEl,
    onEscKeyDown: handleCloseClick,
    onOverlayClick: handleCloseClick
  }), /*#__PURE__*/_react.default.createElement(_index.Banner, {
    color: "neutral",
    fullWidth: true
  }, /*#__PURE__*/_react.default.createElement(_index.Heading3, null, "Popover Title"), /*#__PURE__*/_react.default.createElement(_index.TextSmall, {
    marginTop: 1
  }, "This is the popover content")), /*#__PURE__*/_react.default.createElement(_index.Box, {
    padding: 4,
    overflow: "auto"
  }, /*#__PURE__*/_react.default.createElement(_index.TextBody, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), /*#__PURE__*/_react.default.createElement(_index.ButtonGroup, {
    justifyContent: "flex-end",
    padding: 4
  }, /*#__PURE__*/_react.default.createElement(_index.Button, {
    label: "Cancel"
  }), /*#__PURE__*/_react.default.createElement(_index.Button, {
    level: "primary",
    label: "Confirm"
  }))));
};

exports.experiment2 = experiment2;
experiment2.args = defaultPopoverProps;
experiment2.argTypes = popoverArgTypes;