"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WrapChild = exports.WithoutPointerArrow = exports.WithMaxWidthAuto = exports.WithMaxWidth = exports.StyledSubcomponents = exports.StyledPersistentTooltipInDrawer = exports.PersistentTooltipInDrawer = exports.DifferentPositions = exports.DefaultStory = exports.CustomTitleAndDescription = exports.CustomTextAndCrossIconColors = exports.BrokenPositioning = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _ = require("../..");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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 && 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var _default = exports.default = {
  title: 'Molecules / Persistent Tooltip'
};
var StoryWrapper = function StoryWrapper(_ref) {
  var children = _ref.children;
  return _react.default.createElement("div", {
    style: {
      backgroundColor: 'maroon',
      marginBottom: '500px'
    }
  }, _react.default.createElement(_.Box, {
    mb: 4
  }, _react.default.createElement(_.Typography, {
    type: "title2"
  }, "This component is used to let the user discover new features")), children);
};
var DefaultStory = exports.DefaultStory = function DefaultStory() {
  var _useState = (0, _react.useState)(true),
    _useState2 = _slicedToArray(_useState, 2),
    isOpen = _useState2[0],
    setIsOpen = _useState2[1];
  return _react.default.createElement(StoryWrapper, null, _react.default.createElement(_.PersistentTooltip, {
    isOpen: isOpen,
    title: "Default persistent tooltip",
    description: "The tooltip will not close until the user clicks the close-button \u2013 useful for pointing the user's attention somewhere (for instance when showcasing new features).",
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    }
  }, _react.default.createElement(_.Input.Text, {
    label: "Label"
  })));
};
var WithoutPointerArrow = exports.WithoutPointerArrow = function WithoutPointerArrow() {
  var _useState3 = (0, _react.useState)(true),
    _useState4 = _slicedToArray(_useState3, 2),
    isOpen = _useState4[0],
    setIsOpen = _useState4[1];
  return _react.default.createElement(StoryWrapper, null, _react.default.createElement(_.PersistentTooltip, {
    isOpen: isOpen,
    title: "Persistent tooltip without arrow",
    description: "The tooltip will not close until the user clicks the close-button \u2013 useful for pointing the user's attention somewhere (for instance when showcasing new features).",
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    },
    maxWidth: 30,
    pointerArrow: false
  }, _react.default.createElement(_.Input.Text, {
    label: "Label"
  })));
};
var WithMaxWidth = exports.WithMaxWidth = function WithMaxWidth() {
  var _useState5 = (0, _react.useState)(true),
    _useState6 = _slicedToArray(_useState5, 2),
    isOpen = _useState6[0],
    setIsOpen = _useState6[1];
  return _react.default.createElement(StoryWrapper, null, _react.default.createElement(_.PersistentTooltip, {
    isOpen: isOpen,
    title: "Persistent tooltip with Max Width",
    description: "The tooltip will not close until the user clicks the close-button \u2013 useful for pointing the user's attention somewhere (for instance when showcasing new features).",
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    },
    maxWidth: 30
  }, _react.default.createElement(_.Input.Text, {
    label: "Label"
  })));
};
var WithMaxWidthAuto = exports.WithMaxWidthAuto = function WithMaxWidthAuto() {
  var _useState7 = (0, _react.useState)(true),
    _useState8 = _slicedToArray(_useState7, 2),
    isOpen = _useState8[0],
    setIsOpen = _useState8[1];
  return _react.default.createElement(StoryWrapper, null, _react.default.createElement(_.PersistentTooltip, {
    isOpen: isOpen,
    title: "Persistent tooltip with max width auto",
    description: "Observe that the width might get very long. The tooltip will not close until the user clicks the close-button \u2013 useful for pointing the user's attention somewhere (for instance when showcasing new features).",
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    },
    maxWidth: "auto"
  }, _react.default.createElement(_.Input.Text, {
    label: "Label"
  })));
};
var CustomTitleAndDescription = exports.CustomTitleAndDescription = function CustomTitleAndDescription() {
  var _useState9 = (0, _react.useState)(true),
    _useState10 = _slicedToArray(_useState9, 2),
    isOpen = _useState10[0],
    setIsOpen = _useState10[1];
  return _react.default.createElement(StoryWrapper, null, _react.default.createElement(_.PersistentTooltip, {
    isOpen: isOpen,
    title: _react.default.createElement(_.Box, {
      mb: 4
    }, _react.default.createElement(_.Typography, {
      color: function color(t) {
        return t.color.negative;
      }
    }, "I'm in a box")),
    description: _react.default.createElement(_.Flexbox, {
      container: true,
      gap: 4
    }, _react.default.createElement(_.Flexbox, {
      item: true
    }, _react.default.createElement(_.Typography, {
      color: function color(t) {
        return t.color.textLight;
      }
    }, "I am in a custom jsx description.")), _react.default.createElement(_.Flexbox, {
      item: true
    }, _react.default.createElement(_.Typography, {
      color: function color(t) {
        return t.color.textLight;
      }
    }, "I am in a custom jsx description too!"))),
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    }
  }, _react.default.createElement(_.Input.Text, {
    label: "Label"
  })));
};
var DifferentPositions = exports.DifferentPositions = function DifferentPositions() {
  var _useState11 = (0, _react.useState)(true),
    _useState12 = _slicedToArray(_useState11, 2),
    openOne = _useState12[0],
    setOpenOne = _useState12[1];
  var _useState13 = (0, _react.useState)(true),
    _useState14 = _slicedToArray(_useState13, 2),
    openTwo = _useState14[0],
    setOpenTwo = _useState14[1];
  var _useState15 = (0, _react.useState)(true),
    _useState16 = _slicedToArray(_useState15, 2),
    openThree = _useState16[0],
    setOpenThree = _useState16[1];
  var _useState17 = (0, _react.useState)(true),
    _useState18 = _slicedToArray(_useState17, 2),
    openFour = _useState18[0],
    setOpenFour = _useState18[1];
  return _react.default.createElement(StoryWrapper, null, _react.default.createElement(_.Box, {
    mb: 40
  }, _react.default.createElement(_.PersistentTooltip, {
    isOpen: openOne,
    title: "Different Positions - Right",
    description: "This tooltip is positioned on the right",
    closeButtonTitle: "Close by clicking X",
    position: "right",
    onClose: function onClose() {
      return setOpenOne(false);
    }
  }, _react.default.createElement(_.Input.Text, {
    label: "Label"
  }))), _react.default.createElement(_.Box, {
    mb: 40
  }, _react.default.createElement(_.PersistentTooltip, {
    isOpen: openTwo,
    title: "Different Positions - Bottom",
    description: "This tooltip is positioned on the bottom",
    closeButtonTitle: "Close by clicking X",
    position: "bottom",
    onClose: function onClose() {
      return setOpenTwo(false);
    }
  }, _react.default.createElement(_.Input.Text, {
    label: "Label"
  }))), _react.default.createElement(_.Box, {
    mb: 40
  }, _react.default.createElement(_.PersistentTooltip, {
    isOpen: openThree,
    title: "Different Positions - Left",
    description: "This tooltip is positioned on the left, as you can see it's still positioned on the right. This is because it's dynamically repositioned. It does not fit  on left side of target.",
    closeButtonTitle: "Close by clicking X",
    position: "left",
    onClose: function onClose() {
      return setOpenThree(false);
    }
  }, _react.default.createElement(_.Input.Text, {
    label: "Label"
  }))), _react.default.createElement(_.Box, {
    mb: 40
  }, _react.default.createElement(_.PersistentTooltip, {
    isOpen: openFour,
    title: "Different Positions - Top",
    description: "This tooltip is positioned on the top",
    closeButtonTitle: "Close by clicking X",
    position: "top",
    onClose: function onClose() {
      return setOpenFour(false);
    }
  }, _react.default.createElement(_.Input.Text, {
    label: "Label"
  }))));
};
var PersistentTooltipInDrawer = exports.PersistentTooltipInDrawer = function PersistentTooltipInDrawer() {
  var _useState19 = (0, _react.useState)(false),
    _useState20 = _slicedToArray(_useState19, 2),
    isOpen = _useState20[0],
    setIsOpen = _useState20[1];
  return _react.default.createElement(StoryWrapper, null, _react.default.createElement(_.Drawer, {
    onAnimationComplete: function onAnimationComplete() {
      setIsOpen(true);
    },
    preventOnClickOutsideDataAttributes: ['data-specific-drawer-prevent-click-outside']
  }, _react.default.createElement(_.PersistentTooltip, {
    isOpen: isOpen,
    title: "This is persistent tooltip",
    description: "The tooltip will not close until the user clicks the close-button \u2013 useful for pointing the user's attention somewhere (for instance when showcasing new features).",
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    },
    "data-specific-drawer-prevent-click-outside": true
  }, _react.default.createElement(_.Input.Text, {
    label: "Label"
  }))));
};
var StyledPersistentTooltipWithMargin = (0, _styledComponents.default)(_.PersistentTooltip).withConfig({
  displayName: "PersistentTooltipstories__StyledPersistentTooltipWithMargin",
  componentId: "sc-zc49au-0"
})(["margin-right:20px;"]);
var StyledPersistentTooltipInDrawer = exports.StyledPersistentTooltipInDrawer = function StyledPersistentTooltipInDrawer() {
  var _useState21 = (0, _react.useState)(false),
    _useState22 = _slicedToArray(_useState21, 2),
    isOpen = _useState22[0],
    setIsOpen = _useState22[1];
  return _react.default.createElement(StoryWrapper, null, _react.default.createElement(_.Drawer, {
    onAnimationComplete: function onAnimationComplete() {
      setIsOpen(true);
    },
    preventOnClickOutsideDataAttributes: ['data-specific-drawer-prevent-click-outside']
  }, _react.default.createElement(_.Box, {
    mt: 50
  }, _react.default.createElement(StyledPersistentTooltipWithMargin, {
    isOpen: isOpen,
    title: "This is a styled persistent tooltip",
    description: "If you want to slightly re-position the tooltip, style it and add some margin!",
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    },
    "data-specific-drawer-prevent-click-outside": true,
    position: "left"
  }, _react.default.createElement(_.Input.Text, {
    label: "Label"
  })))));
};
var StyledPersistentTooltipSubComponents = (0, _styledComponents.default)(_.PersistentTooltip).withConfig({
  displayName: "PersistentTooltipstories__StyledPersistentTooltipSubComponents",
  componentId: "sc-zc49au-1"
})(["", "{fill:", ";width:", "px;height:", "px;}"], _.PersistentTooltip.components.CloseButtonIcon, function (p) {
  return p.theme.color.text;
}, function (p) {
  return p.theme.spacing.unit(2);
}, function (p) {
  return p.theme.spacing.unit(2);
});
var StyledSubcomponents = exports.StyledSubcomponents = function StyledSubcomponents() {
  var _useState23 = (0, _react.useState)(true),
    _useState24 = _slicedToArray(_useState23, 2),
    isOpen = _useState24[0],
    setIsOpen = _useState24[1];
  return _react.default.createElement(StoryWrapper, null, _react.default.createElement(StyledPersistentTooltipSubComponents, {
    isOpen: isOpen,
    title: _react.default.createElement(_.Typography, {
      type: "title2"
    }, "I'm in a box"),
    description: _react.default.createElement(_.Typography, null, "The max width is set with a prop for this tooltip. Also, it's subcomponents styled \u2013 different color, smaller close button."),
    closeButtonTitle: "Close by clicking X",
    backgroundColor: function backgroundColor(t) {
      return t.color.warning;
    },
    borderColor: function borderColor(t) {
      return t.color.negative;
    },
    onClose: function onClose() {
      return setIsOpen(false);
    }
  }, _react.default.createElement(_.Input.Text, {
    label: "Label"
  })));
};
var WrapChild = exports.WrapChild = function WrapChild() {
  var _useState25 = (0, _react.useState)(true),
    _useState26 = _slicedToArray(_useState25, 2),
    isOpen = _useState26[0],
    setIsOpen = _useState26[1];
  return _react.default.createElement(StoryWrapper, null, _react.default.createElement(_.Flexbox, {
    container: true
  }, _react.default.createElement(_.Box, {
    mt: 20
  }, _react.default.createElement(_.PersistentTooltip, {
    isOpen: isOpen,
    title: "With wrapchild prop",
    description: "With the wrapChiild prop, a DOM element of type span wraps the children, this guarantees a element in the DOM to work properly with ref (and thus positioning).",
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    },
    position: "right",
    wrapChild: true
  }, _react.default.createElement(_.OldIcon.Pen, null)))), _react.default.createElement(_.Flexbox, {
    container: true
  }, _react.default.createElement(_.Box, {
    mt: 40
  }, _react.default.createElement(_.PersistentTooltip, {
    isOpen: isOpen,
    title: "With a proper DOM-node as children",
    description: "This tooltip doesn't use the wrapChild prop, but has a children that correctly handles refs.",
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    },
    position: "right"
  }, _react.default.createElement("div", null, _react.default.createElement(_.OldIcon.Pen, null))))));
};
var BrokenPositioning = exports.BrokenPositioning = function BrokenPositioning() {
  var _useState27 = (0, _react.useState)(true),
    _useState28 = _slicedToArray(_useState27, 2),
    isOpen = _useState28[0],
    setIsOpen = _useState28[1];
  return _react.default.createElement(StoryWrapper, null, _react.default.createElement(_.Flexbox, {
    container: true
  }, _react.default.createElement(_.Box, {
    mt: 40
  }, _react.default.createElement(_.PersistentTooltip, {
    isOpen: isOpen,
    title: "Broken positioning",
    description: "This tooltip has children which doesn't handle refs correctly. Thus, it's positioning doesn't work properly. See wrapChild for examples of how to fix this.",
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    },
    position: "right"
  }, _react.default.createElement(_.OldIcon.Pen, null)))));
};
var CustomTextAndCrossIconColors = exports.CustomTextAndCrossIconColors = function CustomTextAndCrossIconColors() {
  var _useState29 = (0, _react.useState)(true),
    _useState30 = _slicedToArray(_useState29, 2),
    isOpen = _useState30[0],
    setIsOpen = _useState30[1];
  return _react.default.createElement(StoryWrapper, null, _react.default.createElement(_.PersistentTooltip, {
    isOpen: isOpen,
    title: "Default persistent tooltip",
    description: "The tooltip will not close until the user clicks the close-button \u2013 useful for pointing the user's attention somewhere (for instance when showcasing new features).",
    closeButtonTitle: "Close by clicking X",
    onClose: function onClose() {
      return setIsOpen(false);
    },
    textColor: function textColor(t) {
      return t.color.labelTextPink;
    }
  }, _react.default.createElement(_.Input.Text, {
    label: "Label"
  })));
};