@canonical/react-components 0.47.0 → 0.47.2

package/dist/components/Textarea/Textarea.js

@@ -1,6 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,50 +8,53 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _Field = _interopRequireDefault(require("../Field"));
 var _hooks = require("../../hooks");
-var _excluded = ["caution", "className", "error", "grow", "help", "id", "label", "labelClassName", "onKeyUp", "required", "stacked", "style", "success", "takeFocus", "wrapperClassName"];
-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; }
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * The props for the Textarea component.
  */
 
-var Textarea = function Textarea(_ref) {
-  var caution = _ref.caution,
-    className = _ref.className,
-    error = _ref.error,
-    _ref$grow = _ref.grow,
-    grow = _ref$grow === void 0 ? false : _ref$grow,
-    help = _ref.help,
-    id = _ref.id,
-    label = _ref.label,
-    labelClassName = _ref.labelClassName,
-    _onKeyUp = _ref.onKeyUp,
-    required = _ref.required,
-    stacked = _ref.stacked,
-    style = _ref.style,
-    success = _ref.success,
-    _ref$takeFocus = _ref.takeFocus,
-    takeFocus = _ref$takeFocus === void 0 ? false : _ref$takeFocus,
-    wrapperClassName = _ref.wrapperClassName,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var textareaRef = (0, _react.useRef)(null);
-  var validationId = (0, _hooks.useId)();
-  var helpId = (0, _hooks.useId)();
-  var hasError = !!error;
-  (0, _react.useEffect)(function () {
+const Textarea = _ref => {
+  let {
+    caution,
+    className,
+    error,
+    grow = false,
+    help,
+    id,
+    label,
+    labelClassName,
+    onKeyUp,
+    required,
+    stacked,
+    style,
+    success,
+    takeFocus = false,
+    wrapperClassName,
+    ...props
+  } = _ref;
+  const textareaRef = (0, _react.useRef)(null);
+  const validationId = (0, _hooks.useId)();
+  const helpId = (0, _hooks.useId)();
+  const hasError = !!error;
+  const [innerValue, setInnervalue] = (0, _react.useState)(props.defaultValue);
+  (0, _react.useEffect)(() => {
     if (takeFocus) {
       textareaRef.current.focus();
     }
   }, [takeFocus]);
+  (0, _react.useLayoutEffect)(() => {
+    if (grow) {
+      const textArea = textareaRef.current;
+      if (textArea) {
+        textArea.style.height = "0px";
+        const scrollHeight = textArea.scrollHeight;
+        textArea.style.height = "".concat(scrollHeight, "px");
+      }
+    }
+  }, [textareaRef, grow, innerValue, props.value]);
   return /*#__PURE__*/_react.default.createElement(_Field.default, {
     caution: caution,
     className: wrapperClassName,
@@ -72,20 +74,24 @@ var Textarea = function Textarea(_ref) {
     "aria-invalid": hasError,
     className: (0, _classnames.default)("p-form-validation__input", className),
     id: id,
-    onKeyUp: function onKeyUp(evt) {
-      _onKeyUp && _onKeyUp(evt);
-      if (grow) {
-        evt.currentTarget.style.height = evt.currentTarget.scrollHeight + "px";
+    onKeyUp: evt => {
+      onKeyUp && onKeyUp(evt);
+    },
+    onChange: evt => {
+      if (!props.value) {
+        setInnervalue(evt.target.value);
       }
     },
     ref: textareaRef,
-    style: grow && _objectSpread({
+    style: grow && {
       minHeight: "5rem",
       resize: "none",
       overflow: "hidden",
-      boxSizing: "border-box"
-    }, style) || style
-  }, props)));
+      boxSizing: "border-box",
+      ...style
+    } || style
+  }, props, {
+    value: props.value || innerValue
+  })));
 };
-var _default = Textarea;
-exports.default = _default;
+var _default = exports.default = Textarea;

package/dist/components/Textarea/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Textarea.default;
   }
 });

package/dist/components/Tooltip/Tooltip.d.ts

@@ -56,6 +56,10 @@ export type Props = {
      * The z-index value of the tooltip message element.
      */
     zIndex?: number;
+    /**
+     * Delay in ms after which Tooltip will appear (defaults to 350ms).
+     */
+    delay?: number;
 };
 export declare const adjustForWindow: (position: Position, fitsWindow: WindowFitment) => Position;
 /**
@@ -70,5 +74,5 @@ export declare const adjustForWindow: (position: Position, fitsWindow: WindowFit
  * @param tooltipClassName An optional class to apply to the tooltip message element.
  * @param zIndex The z-index value of the tooltip message element.
  */
-declare const Tooltip: ({ autoAdjust, children, className, followMouse, message, position, positionElementClassName, tooltipClassName, zIndex, }: Props) => JSX.Element;
+declare const Tooltip: ({ autoAdjust, children, className, followMouse, message, position, positionElementClassName, tooltipClassName, zIndex, delay, }: Props) => JSX.Element;
 export default Tooltip;

package/dist/components/Tooltip/Tooltip.js

@@ -1,6 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,16 +8,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactUseportal = _interopRequireDefault(require("react-useportal"));
 var _hooks = require("../../hooks");
-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; }
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var position = {
+const position = exports.position = {
   btmCenter: "btm-center",
   btmLeft: "btm-left",
   btmRight: "btm-right",
@@ -28,18 +21,19 @@ var position = {
   topLeft: "top-left",
   topRight: "top-right"
 };
-exports.position = position;
-var getPositionStyle = function getPositionStyle(pos, wrapperNode) {
+const getPositionStyle = (pos, wrapperNode) => {
   if (!wrapperNode) {
     return null;
   }
-  var dimensions = wrapperNode.getBoundingClientRect();
-  var x = dimensions.x,
-    y = dimensions.y,
-    height = dimensions.height,
-    width = dimensions.width;
-  var left = x + window.scrollX || 0;
-  var top = y + window.scrollY || 0;
+  const dimensions = wrapperNode.getBoundingClientRect();
+  const {
+    x,
+    y,
+    height,
+    width
+  } = dimensions;
+  let left = x + window.scrollX || 0;
+  let top = y + window.scrollY || 0;
   switch (pos) {
     case "btm-center":
       left += width / 2;
@@ -72,12 +66,12 @@ var getPositionStyle = function getPositionStyle(pos, wrapperNode) {
   }
   return {
     position: "absolute",
-    left: left,
-    top: top
+    left,
+    top
   };
 };
-var adjustForWindow = function adjustForWindow(position, fitsWindow) {
-  var newPosition = position;
+const adjustForWindow = (position, fitsWindow) => {
+  let newPosition = position;
   if (!fitsWindow.fromLeft.fitsLeft && newPosition === "left") {
     newPosition = "top-right";
   }
@@ -123,48 +117,50 @@ var adjustForWindow = function adjustForWindow(position, fitsWindow) {
  * @param zIndex The z-index value of the tooltip message element.
  */
 exports.adjustForWindow = adjustForWindow;
-var Tooltip = function Tooltip(_ref) {
-  var _ref$autoAdjust = _ref.autoAdjust,
-    autoAdjust = _ref$autoAdjust === void 0 ? true : _ref$autoAdjust,
-    children = _ref.children,
-    className = _ref.className,
-    _ref$followMouse = _ref.followMouse,
-    followMouse = _ref$followMouse === void 0 ? false : _ref$followMouse,
-    message = _ref.message,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? "top-left" : _ref$position,
-    positionElementClassName = _ref.positionElementClassName,
-    tooltipClassName = _ref.tooltipClassName,
-    zIndex = _ref.zIndex;
-  var wrapperRef = (0, _react.useRef)(null);
-  var messageRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(position),
-    _useState2 = _slicedToArray(_useState, 2),
-    adjustedPosition = _useState2[0],
-    setAdjustedPosition = _useState2[1];
-  var _useState3 = (0, _react.useState)({
-      position: "absolute",
-      // Initially position the tooltip of the screen in case it gets shown
-      // before setting the position.
-      left: -9999999,
-      top: -9999999
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    positionStyle = _useState4[0],
-    setPositionStyle = _useState4[1];
-  var _usePortal = (0, _reactUseportal.default)(),
-    openPortal = _usePortal.openPortal,
-    closePortal = _usePortal.closePortal,
-    isOpen = _usePortal.isOpen,
-    Portal = _usePortal.Portal;
-  var tooltipId = (0, _hooks.useId)();
-  (0, _react.useEffect)(function () {
+const Tooltip = _ref => {
+  let {
+    autoAdjust = true,
+    children,
+    className,
+    followMouse = false,
+    message,
+    position = "top-left",
+    positionElementClassName,
+    tooltipClassName,
+    zIndex,
+    delay = 350
+  } = _ref;
+  const wrapperRef = (0, _react.useRef)(null);
+  const messageRef = (0, _react.useRef)(null);
+  const [adjustedPosition, setAdjustedPosition] = (0, _react.useState)(position);
+  const [positionStyle, setPositionStyle] = (0, _react.useState)({
+    position: "absolute",
+    // Initially position the tooltip of the screen in case it gets shown
+    // before setting the position.
+    left: -9999999,
+    top: -9999999
+  });
+  const {
+    openPortal,
+    closePortal,
+    isOpen,
+    Portal
+  } = (0, _reactUseportal.default)({
+    programmaticallyOpen: true
+  });
+  const tooltipId = (0, _hooks.useId)();
+  const [timer, setTimer] = (0, _react.useState)(null);
+  const cancelableClosePortal = (0, _react.useCallback)(() => {
+    clearTimeout(timer);
+    closePortal();
+  }, [timer, closePortal]);
+  (0, _react.useEffect)(() => {
     if (isOpen && !followMouse && wrapperRef.current) {
       // Position the tooltip when it becomes visible.
       setPositionStyle(getPositionStyle(adjustedPosition, wrapperRef.current));
     }
   }, [adjustedPosition, isOpen, followMouse]);
-  var mouseHandler = (0, _react.useCallback)(function (evt) {
+  const mouseHandler = (0, _react.useCallback)(evt => {
     // Set the position of the tooltip next to the mouse.
     setPositionStyle({
       // Don't allow the tooltip to block the mouse events.
@@ -174,7 +170,7 @@ var Tooltip = function Tooltip(_ref) {
       top: evt.pageY
     });
   }, []);
-  var onUpdateWindowFitment = (0, _react.useCallback)(function (fitsWindow) {
+  const onUpdateWindowFitment = (0, _react.useCallback)(fitsWindow => {
     setAdjustedPosition(adjustForWindow(position, fitsWindow));
   }, [setAdjustedPosition, position]);
 
@@ -183,61 +179,63 @@ var Tooltip = function Tooltip(_ref) {
 
   // Handle adjusting the position of the tooltip so that it remains on screen.
   (0, _hooks.useWindowFitment)(messageRef.current, wrapperRef.current, onUpdateWindowFitment, 20, isOpen, autoAdjust && followMouse);
-  var handleKeyPress = (0, _react.useCallback)(function (event) {
+  const handleKeyPress = (0, _react.useCallback)(event => {
     if (event.key === "Escape") {
-      closePortal();
+      cancelableClosePortal();
     }
-  }, [closePortal]);
-  (0, _react.useEffect)(function () {
+  }, [cancelableClosePortal]);
+  (0, _react.useEffect)(() => {
     window.addEventListener("keypress", handleKeyPress);
-    return function () {
+    return () => {
       window.removeEventListener("keypress", handleKeyPress);
     };
   }, [handleKeyPress]);
-  var handleBlur = function handleBlur(e) {
+  const handleBlur = e => {
     var _wrapperRef$current, _messageRef$current;
     // do not close if the focus is within the tooltip wrapper
     if (wrapperRef !== null && wrapperRef !== void 0 && (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(document.activeElement)) {
       return;
     }
     if (e.relatedTarget ? !((_messageRef$current = messageRef.current) !== null && _messageRef$current !== void 0 && _messageRef$current.contains(e.relatedTarget)) : e.target !== messageRef.current) {
-      closePortal();
+      cancelableClosePortal();
     }
   };
-  var handleClick = function handleClick(e) {
+  const handleClick = e => {
     var _messageRef$current2;
     // ignore clicks within the tooltip message
     if ((_messageRef$current2 = messageRef.current) !== null && _messageRef$current2 !== void 0 && _messageRef$current2.contains(e.target)) {
       return;
     }
     e.target.focus();
-    openPortal();
+    openPortal(e);
   };
+  const delayedOpenPortal = (0, _react.useCallback)(() => {
+    const timeout = setTimeout(() => openPortal(), delay);
+    setTimer(timeout);
+  }, [delay, openPortal]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message ? /*#__PURE__*/_react.default.createElement("span", {
     className: className,
     onBlur: handleBlur,
     onClick: handleClick,
     onFocus: openPortal,
     onMouseOut: handleBlur,
-    onMouseOver: openPortal
+    onMouseOver: delayedOpenPortal
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: positionElementClassName,
     ref: wrapperRef,
     style: {
       display: "inline-block"
     }
-  }, _react.default.Children.map(children, function (child) {
-    return child && /*#__PURE__*/_react.default.isValidElement(child) ? /*#__PURE__*/_react.default.cloneElement(child, {
-      "aria-describedby": isOpen ? tooltipId : undefined
-    }) : child;
-  })), isOpen ? /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement("span", {
+  }, _react.default.Children.map(children, child => child && /*#__PURE__*/_react.default.isValidElement(child) ? /*#__PURE__*/_react.default.cloneElement(child, {
+    "aria-describedby": isOpen ? tooltipId : undefined
+  }) : child)), isOpen ? /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)("p-tooltip--".concat(adjustedPosition), "is-detached", tooltipClassName),
     "data-testid": "tooltip-portal",
     style: positionStyle
   }, /*#__PURE__*/_react.default.createElement("span", {
     role: "tooltip",
     className: "p-tooltip__message",
-    onClick: function onClick(event) {
+    onClick: event => {
       // Prevent clicks inside the message from bubbling to parent
       // click handlers.
       event.stopPropagation();
@@ -251,5 +249,4 @@ var Tooltip = function Tooltip(_ref) {
     className: className
   }, children));
 };
-var _default = Tooltip;
-exports.default = _default;
+var _default = exports.default = Tooltip;

package/dist/components/Tooltip/index.js

@@ -1,21 +1,20 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Tooltip.default;
   }
 });
 Object.defineProperty(exports, "position", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Tooltip.position;
   }
 });
 var _Tooltip = _interopRequireWildcard(require("./Tooltip"));
-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; }
+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; }

package/dist/enums.js

@@ -7,9 +7,8 @@ exports.Theme = void 0;
 /**
  * The Vanilla theme types.
  */
-var Theme = /*#__PURE__*/function (Theme) {
+let Theme = exports.Theme = /*#__PURE__*/function (Theme) {
   Theme["DARK"] = "dark";
   Theme["LIGHT"] = "light";
   return Theme;
-}({});
-exports.Theme = Theme;
+}({});

package/dist/hooks/index.d.ts

@@ -1,4 +1,4 @@
-export { useClickOutside } from "./useClickOutside";
+export { useOnClickOutside, useClickOutside } from "./useOnClickOutside";
 export { useId } from "./useId";
 export { useListener } from "./useListener";
 export { useOnEscapePressed } from "./useOnEscapePressed";

package/dist/hooks/index.js

@@ -5,53 +5,59 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "useClickOutside", {
   enumerable: true,
-  get: function get() {
-    return _useClickOutside.useClickOutside;
+  get: function () {
+    return _useOnClickOutside.useClickOutside;
   }
 });
 Object.defineProperty(exports, "useId", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _useId.useId;
   }
 });
 Object.defineProperty(exports, "useListener", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _useListener.useListener;
   }
 });
+Object.defineProperty(exports, "useOnClickOutside", {
+  enumerable: true,
+  get: function () {
+    return _useOnClickOutside.useOnClickOutside;
+  }
+});
 Object.defineProperty(exports, "useOnEscapePressed", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _useOnEscapePressed.useOnEscapePressed;
   }
 });
 Object.defineProperty(exports, "usePagination", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _usePagination.usePagination;
   }
 });
 Object.defineProperty(exports, "usePrevious", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _usePrevious.usePrevious;
   }
 });
 Object.defineProperty(exports, "useThrottle", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _useThrottle.useThrottle;
   }
 });
 Object.defineProperty(exports, "useWindowFitment", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _useWindowFitment.useWindowFitment;
   }
 });
-var _useClickOutside = require("./useClickOutside");
+var _useOnClickOutside = require("./useOnClickOutside");
 var _useId = require("./useId");
 var _useListener = require("./useListener");
 var _useOnEscapePressed = require("./useOnEscapePressed");

package/dist/hooks/useId.js

@@ -11,7 +11,5 @@ var _nanoid = require("nanoid");
  * Can be used as a value for HTML "id" attributes.
  * @returns random ID string
  */
-var useId = function useId() {
-  return (0, _react.useRef)((0, _nanoid.nanoid)()).current;
-};
+const useId = () => (0, _react.useRef)((0, _nanoid.nanoid)()).current;
 exports.useId = useId;

package/dist/hooks/useListener.d.ts

@@ -6,5 +6,6 @@
  * @param eventType The event name.
  * @param shouldThrottle Whether the callback calls should be throttled.
  * @param shouldListen When the listener should be active.
+ * @param options Native event listener options.
  */
-export declare const useListener: (targetNode: Window | HTMLElement, callback: (...args: any[]) => any, eventType: string, shouldThrottle?: boolean, shouldListen?: boolean) => void;
+export declare const useListener: (targetNode: Window | HTMLElement, callback: (...args: any[]) => any, eventType: string, shouldThrottle?: boolean, shouldListen?: boolean, options?: boolean | AddEventListenerOptions) => void;

package/dist/hooks/useListener.js

@@ -15,23 +15,26 @@ var _usePrevious = require("./usePrevious");
  * @param eventType The event name.
  * @param shouldThrottle Whether the callback calls should be throttled.
  * @param shouldListen When the listener should be active.
+ * @param options Native event listener options.
  */
-var useListener = function useListener(targetNode, callback, eventType) {
-  var shouldThrottle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  var shouldListen = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
-  var isListening = (0, _react.useRef)(false);
-  var throttle = (0, _useThrottle.useThrottle)(callback);
-  var eventListener = (0, _react.useRef)(shouldThrottle ? throttle : callback);
-  var previousEventType = (0, _usePrevious.usePrevious)(eventType);
-  var previousShouldThrottle = (0, _usePrevious.usePrevious)(shouldThrottle);
-  var previousTargetNode = (0, _usePrevious.usePrevious)(targetNode);
-  var previousCallback = (0, _usePrevious.usePrevious)(callback);
-  (0, _react.useEffect)(function () {
+const useListener = function (targetNode, callback, eventType) {
+  let shouldThrottle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  let shouldListen = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+  let options = arguments.length > 5 ? arguments[5] : undefined;
+  const isListening = (0, _react.useRef)(false);
+  const throttle = (0, _useThrottle.useThrottle)(callback);
+  const eventListener = (0, _react.useRef)(shouldThrottle ? throttle : callback);
+  const previousEventType = (0, _usePrevious.usePrevious)(eventType);
+  const previousShouldThrottle = (0, _usePrevious.usePrevious)(shouldThrottle);
+  const previousTargetNode = (0, _usePrevious.usePrevious)(targetNode);
+  const previousCallback = (0, _usePrevious.usePrevious)(callback);
+  const previousOptions = (0, _usePrevious.usePrevious)(options);
+  (0, _react.useEffect)(() => {
     // If any of the props related to the attached listener changed then the
     // listener needs to be re-attached.
-    var listenerAttributesChanged = callback !== previousCallback || eventType !== previousEventType || shouldThrottle !== previousShouldThrottle || targetNode !== previousTargetNode;
+    const listenerAttributesChanged = callback !== previousCallback || eventType !== previousEventType || shouldThrottle !== previousShouldThrottle || targetNode !== previousTargetNode || options !== previousOptions;
     if (isListening.current && (!shouldListen || listenerAttributesChanged)) {
-      previousTargetNode.removeEventListener(previousEventType, eventListener.current);
+      previousTargetNode.removeEventListener(previousEventType, eventListener.current, previousOptions);
       isListening.current = false;
     }
     if (shouldThrottle !== previousShouldThrottle || callback !== previousCallback) {
@@ -39,18 +42,16 @@ var useListener = function useListener(targetNode, callback, eventType) {
       eventListener.current = shouldThrottle ? throttle : callback;
     }
     if (targetNode && shouldListen && !isListening.current) {
-      targetNode.addEventListener(eventType, eventListener.current);
+      targetNode.addEventListener(eventType, eventListener.current, options);
       isListening.current = true;
     }
-  }, [callback, eventType, previousCallback, previousEventType, previousShouldThrottle, previousTargetNode, shouldListen, shouldThrottle, targetNode, throttle]);
-  (0, _react.useEffect)(function () {
-    return function () {
-      // Unattach the listener if the component gets unmounted while
-      // listening.
-      if (targetNode && isListening.current) {
-        targetNode.removeEventListener(eventType, eventListener.current);
-      }
-    };
-  }, [eventType, targetNode]);
+  }, [callback, eventType, options, previousCallback, previousEventType, previousOptions, previousShouldThrottle, previousTargetNode, shouldListen, shouldThrottle, targetNode, throttle]);
+  (0, _react.useEffect)(() => () => {
+    // Unattach the listener if the component gets unmounted while
+    // listening.
+    if (targetNode && isListening.current) {
+      targetNode.removeEventListener(eventType, eventListener.current, options);
+    }
+  }, [eventType, targetNode, options]);
 };
 exports.useListener = useListener;