@vitus-labs/elements 0.22.0 → 0.23.0-alpha.2

package/lib/vitus-labs-elements.umd.js

@@ -2,12 +2,11 @@
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@vitus-labs/unistyle'), require('react'), require('@vitus-labs/core'), require('react-dom')) :
   typeof define === 'function' && define.amd ? define(['exports', '@vitus-labs/unistyle', 'react', '@vitus-labs/core', 'react-dom'], factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.vitusLabsElements = {}, global.unistyle, global.React, global.core, global.ReactDOM));
-})(this, (function (exports, unistyle, React, core, ReactDOM) { 'use strict';
+})(this, (function (exports, unistyle, React, core, reactDom) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-  var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
   // eslint-disable-next-line import/prefer-default-export
   const PKG_NAME = '@vitus-labs/elements';
@@ -38,7 +37,7 @@
       `};
   `};
 
-  ${t.contentAlignY === 'block' &&
+  ${t.alignY === 'block' &&
     css `
     height: 100%;
   `};
@@ -56,10 +55,7 @@
 
   ${t.extraStyles && unistyle.extendCss(t.extraStyles)};
 `;
-  const platformStyles = core.config.css `
-    box-sizing: border-box;
-  `
-      ;
+  const platformStyles = 'box-sizing: border-box;' ;
   var Styled$2 = core.config.styled(core.config.component) `
   position: relative;
   ${platformStyles};
@@ -80,7 +76,7 @@
 })};
 `;
 
-  const component$6 = React.forwardRef(({ children, tag, block, extendCss, direction, alignX, alignY, equalCols, isInline, ...props }, ref) => {
+  const component$9 = React.forwardRef(({ children, tag, block, extendCss, direction, alignX, alignY, equalCols, isInline, ...props }, ref) => {
       const debugProps = process.env.NODE_ENV !== 'production'
           ? {
               'data-vl-element': 'Element',
@@ -94,6 +90,8 @@
       };
       const needsFix = !props.dangerouslySetInnerHTML && tag && isWebFixNeeded(tag)
           ;
+      // eslint-disable-next-line no-nested-ternary
+      const asTag = (isInline ? 'span' : 'div') ;
       if (!needsFix || false) {
           return (React__default["default"].createElement(Styled$2, { ...COMMON_PROPS, "$element": {
                   block,
@@ -108,7 +106,7 @@
               block,
               extraStyles: extendCss,
           } },
-          React__default["default"].createElement(Styled$2, { as: isInline ? 'span' : 'div', "$childFix": true, "$element": {
+          React__default["default"].createElement(Styled$2, { as: asTag, "$childFix": true, "$element": {
                   direction,
                   alignX,
                   alignY,
@@ -186,7 +184,7 @@
 })};
 `;
 
-  const component$4 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, ...props }) => {
+  const component$7 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, ...props }) => {
       const debugProps = process.env.NODE_ENV !== 'production'
           ? {
               'data-vl-element': contentType,
@@ -202,7 +200,7 @@
               extraStyles: extendCss,
           }, ...debugProps, ...props }));
   };
-  var component$5 = React.memo(component$4);
+  var component$8 = React.memo(component$7);
 
   const INLINE_ELEMENTS = {
       span: true,
@@ -258,35 +256,17 @@
   const isInlineElement = (tag) => tag ? INLINE_ELEMENTS[tag] : false;
   const getShouldBeEmpty = (tag) => tag ? EMPTY_ELEMENTS[tag] : false;
 
-  const defaultDirection = 'inline';
-  const defaultContentDirection = 'rows';
+  const defaultBeforeAfterDirection = 'inline';
+  const defaultDirection = 'rows';
   const defaultAlignX = 'left';
   const defaultAlignY = 'center';
-  const component$3 = React.forwardRef(({ innerRef, tag, label, content, children, beforeContent, afterContent, block, equalCols, gap, direction, alignX = defaultAlignX, alignY = defaultAlignY, css, contentCss, beforeContentCss, afterContentCss, contentDirection = defaultContentDirection, contentAlignX = defaultAlignX, contentAlignY = defaultAlignY, beforeContentDirection = defaultDirection, beforeContentAlignX = defaultAlignX, beforeContentAlignY = defaultAlignY, afterContentDirection = defaultDirection, afterContentAlignX = defaultAlignX, afterContentAlignY = defaultAlignY, ...props }, ref) => {
+  const component$6 = React.forwardRef(({ innerRef, tag, label, content, children, beforeContent, afterContent, block, equalCols, gap, direction = defaultDirection, alignX = defaultAlignX, alignY = defaultAlignY, css, contentCss, beforeContentCss, afterContentCss, contentDirection = defaultDirection, contentAlignX = defaultAlignX, contentAlignY = defaultAlignY, beforeContentDirection = defaultBeforeAfterDirection, beforeContentAlignX = defaultAlignX, beforeContentAlignY = defaultAlignY, afterContentDirection = defaultBeforeAfterDirection, afterContentAlignX = defaultAlignX, afterContentAlignY = defaultAlignY, ...props }, ref) => {
       // --------------------------------------------------------
       // check if should render only single element
       // --------------------------------------------------------
       const shouldBeEmpty = !!props.dangerouslySetInnerHTML ||
           (tag && getShouldBeEmpty(tag));
       // --------------------------------------------------------
-      // common wrapper props
-      // --------------------------------------------------------
-      const WRAPPER_PROPS = {
-          ref: ref || innerRef,
-          extendCss: css,
-          tag,
-          block,
-          contentDirection,
-          alignX: contentAlignX,
-          alignY: contentAlignY,
-          as: undefined, // reset styled-components `as` prop
-      };
-      // --------------------------------------------------------
-      // return simple/empty element like input
-      // --------------------------------------------------------
-      if (shouldBeEmpty)
-          return React__default["default"].createElement(component$6, { ...WRAPPER_PROPS, ...props });
-      // --------------------------------------------------------
       // if not single element, calculate values
       // --------------------------------------------------------
       const isSimpleElement = !beforeContent && !afterContent;
@@ -296,8 +276,8 @@
       // --------------------------------------------------------
       // direction & alignX & alignY calculations
       // --------------------------------------------------------
-      const calculateDirection = React.useMemo(() => {
-          let wrapperDirection;
+      const { wrapperDirection, wrapperAlignX, wrapperAlignY } = React.useMemo(() => {
+          let wrapperDirection = direction;
           let wrapperAlignX = alignX;
           let wrapperAlignY = alignY;
           if (isSimpleElement) {
@@ -320,21 +300,39 @@
           contentDirection,
           contentAlignX,
           contentAlignY,
+          alignX,
+          alignY,
           direction,
       ]);
-      const { wrapperDirection, wrapperAlignX, wrapperAlignY } = calculateDirection;
-      const beforeContentRenderOutput = React.useMemo(() => core.renderContent(beforeContent), [beforeContent]);
-      const afterContentRenderOutput = React.useMemo(() => core.renderContent(afterContent), [afterContent]);
-      const contentRenderOutput = React.useMemo(() => core.renderContent(CHILDREN), [CHILDREN]);
-      return (React__default["default"].createElement(component$6, { ...props, ...WRAPPER_PROPS, isInline: isInline, direction: wrapperDirection, alignX: wrapperAlignX, alignY: wrapperAlignY },
-          beforeContent && (React__default["default"].createElement(component$5, { tag: SUB_TAG, contentType: "before", parentDirection: wrapperDirection, extendCss: beforeContentCss, direction: beforeContentDirection, alignX: beforeContentAlignX, alignY: beforeContentAlignY, equalCols: equalCols, gap: gap }, beforeContentRenderOutput)),
-          isSimpleElement ? (contentRenderOutput) : (React__default["default"].createElement(component$5, { tag: SUB_TAG, contentType: "content", parentDirection: wrapperDirection, extendCss: contentCss, direction: contentDirection, alignX: contentAlignX, alignY: contentAlignY, equalCols: equalCols }, contentRenderOutput)),
-          afterContent && (React__default["default"].createElement(component$5, { tag: SUB_TAG, contentType: "after", parentDirection: wrapperDirection, extendCss: afterContentCss, direction: afterContentDirection, alignX: afterContentAlignX, alignY: afterContentAlignY, equalCols: equalCols, gap: gap }, afterContentRenderOutput))));
+      // --------------------------------------------------------
+      // common wrapper props
+      // --------------------------------------------------------
+      const WRAPPER_PROPS = {
+          ref: ref || innerRef,
+          extendCss: css,
+          tag,
+          block,
+          direction: wrapperDirection,
+          alignX: wrapperAlignX,
+          alignY: wrapperAlignY,
+          as: undefined, // reset styled-components `as` prop
+      };
+      // --------------------------------------------------------
+      // return simple/empty element like input or image etc.
+      // --------------------------------------------------------
+      if (shouldBeEmpty) {
+          return React__default["default"].createElement(component$9, { ...props, ...WRAPPER_PROPS });
+      }
+      const contentRenderOutput = core.renderContent(CHILDREN);
+      return (React__default["default"].createElement(component$9, { ...props, ...WRAPPER_PROPS, isInline: isInline },
+          beforeContent && (React__default["default"].createElement(component$8, { tag: SUB_TAG, contentType: "before", parentDirection: wrapperDirection, extendCss: beforeContentCss, direction: beforeContentDirection, alignX: beforeContentAlignX, alignY: beforeContentAlignY, equalCols: equalCols, gap: gap }, core.renderContent(beforeContent))),
+          isSimpleElement ? (contentRenderOutput) : (React__default["default"].createElement(component$8, { tag: SUB_TAG, contentType: "content", parentDirection: wrapperDirection, extendCss: contentCss, direction: contentDirection, alignX: contentAlignX, alignY: contentAlignY, equalCols: equalCols }, contentRenderOutput)),
+          afterContent && (React__default["default"].createElement(component$8, { tag: SUB_TAG, contentType: "after", parentDirection: wrapperDirection, extendCss: afterContentCss, direction: afterContentDirection, alignX: afterContentAlignX, alignY: afterContentAlignY, equalCols: equalCols, gap: gap }, core.renderContent(afterContent)))));
   });
   const name$4 = `${PKG_NAME}/Element`;
-  component$3.displayName = name$4;
-  component$3.pkgName = PKG_NAME;
-  component$3.VITUS_LABS__COMPONENT = name$4;
+  component$6.displayName = name$4;
+  component$6.pkgName = PKG_NAME;
+  component$6.VITUS_LABS__COMPONENT = name$4;
 
   /* eslint-disable no-param-reassign */
   const isNumber = (a, b) => Number.isInteger(a) && Number.isInteger(b);
@@ -399,15 +397,16 @@
           position,
       };
   };
-  const component$2 = (props) => {
+  const component$5 = (props) => {
       const { itemKey, valueName, children, component, data, wrapComponent: Wrapper, wrapProps, itemProps, } = props;
-      const renderedElement = (component, props) => core.renderContent(component, props);
-      const injectItemProps = typeof itemProps === 'function'
-          ? (props, extendedProps) => itemProps(props, extendedProps)
-          : () => itemProps;
-      const injectWrapItemProps = typeof wrapProps === 'function'
-          ? (props, extendedProps) => wrapProps(props, extendedProps)
-          : () => wrapProps;
+      const renderedElement = core.renderContent;
+      const injectItemProps = React.useMemo(() => (typeof itemProps === 'function' ? itemProps : () => itemProps), [itemProps]);
+      const injectWrapItemProps = React.useMemo(() => (typeof wrapProps === 'function' ? wrapProps : () => wrapProps), [wrapProps]);
+      const getKey = React.useCallback((item, index) => {
+          if (typeof itemKey === 'function')
+              return itemKey(item, index);
+          return index;
+      }, []);
       // --------------------------------------------------------
       // render children
       // --------------------------------------------------------
@@ -441,18 +440,11 @@
       // render array of strings or numbers
       // --------------------------------------------------------
       const renderSimpleArray = (data) => {
-          const renderData = data.filter((item) => item !== null || item !== undefined // remove empty values
-          );
-          const { length } = renderData;
-          // if it's empty
-          if (renderData.length === 0)
+          const { length } = data;
+          // if the data array is empty
+          if (data.length === 0)
               return null;
-          const getKey = (item, index) => {
-              if (typeof itemKey === 'function')
-                  return itemKey(item, index);
-              return index;
-          };
-          return renderData.map((item, i) => {
+          return data.map((item, i) => {
               const key = getKey(item, i);
               const keyName = valueName || 'children';
               const extendedProps = attachItemProps({
@@ -526,11 +518,11 @@
           // render props component + data
           // --------------------------------------------------------
           if (component && Array.isArray(data)) {
-              const clearData = data.filter((item) => item !== null && item !== undefined);
-              const isSimpleArray = clearData.every((item) => typeof item === 'string' || typeof item === 'number');
+              const clearData = React.useMemo(() => data.filter((item) => item !== null && item !== undefined), [data]);
+              const isSimpleArray = React.useMemo(() => clearData.every((item) => typeof item === 'string' || typeof item === 'number'), [clearData]);
               if (isSimpleArray)
                   return renderSimpleArray(clearData);
-              const isComplexArray = clearData.every((item) => typeof item === 'object');
+              const isComplexArray = React.useMemo(() => clearData.every((item) => typeof item === 'object'), [clearData]);
               if (isComplexArray)
                   return renderComplexArray(clearData);
               return null;
@@ -543,19 +535,19 @@
       };
       return renderItems();
   };
-  component$2.isIterator = true;
-  component$2.RESERVED_PROPS = RESERVED_PROPS;
+  component$5.isIterator = true;
+  component$5.RESERVED_PROPS = RESERVED_PROPS;
 
-  const Component$2 = React.forwardRef(({ rootElement = false, ...props }, ref) => {
-      const renderedList = React__default["default"].createElement(component$2, { ...core.pick(props, component$2.RESERVED_PROPS) });
+  const component$4 = React.forwardRef(({ rootElement = false, ...props }, ref) => {
+      const renderedList = React__default["default"].createElement(component$5, { ...core.pick(props, component$5.RESERVED_PROPS) });
       if (!rootElement)
           return renderedList;
-      return (React__default["default"].createElement(component$3, { ref: ref, ...core.omit(props, component$2.RESERVED_PROPS) }, renderedList));
+      return (React__default["default"].createElement(component$6, { ref: ref, ...core.omit(props, component$5.RESERVED_PROPS) }, renderedList));
   });
   const name$3 = `${PKG_NAME}/List`;
-  Component$2.displayName = name$3;
-  Component$2.pkgName = PKG_NAME;
-  Component$2.VITUS_LABS__COMPONENT = name$3;
+  component$4.displayName = name$3;
+  component$4.pkgName = PKG_NAME;
+  component$4.VITUS_LABS__COMPONENT = name$3;
 
   const RESERVED_KEYS = [
       'type',
@@ -563,7 +555,7 @@
       'itemProps',
       'activeItemRequired',
   ];
-  const Component$1 = (WrappedComponent) => {
+  const component$3 = (WrappedComponent) => {
       const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
       const Enhanced = (props) => {
           const { type = 'single', activeItemRequired, activeItems, itemProps = {}, ...rest } = props;
@@ -682,23 +674,23 @@
           return React__default["default"].createElement(WrappedComponent, { ...rest, itemProps: attachItemProps });
       };
       Enhanced.RESERVED_KEYS = RESERVED_KEYS;
-      Enhanced.displayName = `vitus-labs/elements/List/withActiveState(${displayName})`;
+      Enhanced.displayName = `@vitus-labs/elements/List/withActiveState(${displayName})`;
       return Enhanced;
   };
 
-  const component$1 = ({ position = undefined, tag = 'div', children, }) => {
+  const component$2 = ({ position = undefined, tag = 'div', children, }) => {
       const [element] = React.useState(undefined);
       if (!position || !element)
           return null;
       React.useEffect(() => {
           return undefined;
       }, []);
-      return ReactDOM__default["default"].createPortal(children, element);
+      return reactDom.createPortal(children, element);
   };
   const name$2 = `${PKG_NAME}/Portal`;
-  component$1.displayName = name$2;
-  component$1.pkgName = PKG_NAME;
-  component$1.VITUS_LABS__COMPONENT = name$2;
+  component$2.displayName = name$2;
+  component$2.pkgName = PKG_NAME;
+  component$2.VITUS_LABS__COMPONENT = name$2;
 
   const context = React.createContext({});
   const useOverlayContext = () => React.useContext(context);
@@ -710,11 +702,11 @@
   position = 'fixed', // absolute | fixed | relative | static
   alignX = 'left', // left | center | right
   alignY = 'bottom', // top | center | bottom
-  offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc = true, disabled, }) => {
+  offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc = true, disabled, onOpen, onClose, }) => {
       const { rootSize } = React.useContext(core.context);
       const ctx = useOverlayContext();
       const [blocked, handleBlocked] = React.useState(false);
-      const [visible, setVisible] = React.useState(isOpen);
+      const [active, handleActive] = React.useState(isOpen);
       const [innerAlign, setInnerAlign] = React.useState(align);
       const [innerAlignX, setInnerAlignX] = React.useState(alignX);
       const [innerAlignY, setInnerAlignY] = React.useState(alignY);
@@ -722,100 +714,96 @@
       const contentRef = React.useRef();
       const setBlocked = React.useCallback(() => handleBlocked(true), []);
       const setUnblocked = React.useCallback(() => handleBlocked(false), []);
+      const showContent = React.useCallback(() => {
+          handleActive(true);
+      }, []);
+      const hideContent = React.useCallback(() => {
+          handleActive(false);
+      }, []);
       // if an Overlay has an Overlay child, this will prevent closing parent child
+      // + calculate correct position when an Overlay is opened
       React.useEffect(() => {
-          if (visible && ctx?.setBlocked)
-              ctx.setBlocked();
-          else if (!visible && ctx?.setUnblocked)
-              ctx.setUnblocked();
-      }, [visible]);
-      // calculate correct position when an Overlay is opened
-      React.useEffect(() => {
-          if (visible)
+          if (active) {
               calculateContentPosition();
-      }, [visible]);
-      // handles calculationg correct position of content
+              if (ctx?.setBlocked)
+                  ctx.setBlocked();
+              if (onOpen)
+                  onOpen();
+          }
+          else {
+              if (ctx?.setUnblocked)
+                  ctx.setUnblocked();
+              if (onClose)
+                  onClose();
+          }
+      }, [active]);
+      // handles calculating correct position of content
       // on document events (or custom scroll if set)
       React.useEffect(() => {
-          if (visible) {
-              window.addEventListener('resize', handleContentPosition, false);
-              window.addEventListener('scroll', handleContentPosition, false);
-              if (customScrollListener) {
-                  customScrollListener.addEventListener('scroll', handleContentPosition, false);
-              }
-          }
+          if (!active)
+              return undefined;
+          window.addEventListener('resize', handleContentPosition, false);
+          window.addEventListener('scroll', handleContentPosition, false);
           return () => {
               window.removeEventListener('resize', handleContentPosition, false);
               window.removeEventListener('scroll', handleContentPosition, false);
-              if (customScrollListener) {
-                  customScrollListener.removeEventListener('scroll', handleContentPosition, false);
-              }
           };
-      }, [visible, customScrollListener]);
+      }, [active, customScrollListener]);
       // make sure scrolling is blocked in case of modal windows or when
       // customScroll is set
       React.useEffect(() => {
           return () => {
           };
-      }, [visible, type, customScrollListener]);
+      }, [active, type, customScrollListener]);
+      // only when content is active handle closing
       React.useEffect(() => {
-          // enable overlay manipulation only when the state is NOT blocked=true
-          // nor in disabled state
-          if (!blocked || !disabled) {
-              if (openOn === 'click' ||
-                  closeOn === 'click' ||
-                  closeOn === 'clickOnTrigger' ||
-                  closeOn === 'clickOutsideContent') {
-                  window.addEventListener('click', handleVisibilityByEventType, false);
-              }
-              if (openOn === 'hover' || closeOn === 'hover') {
-                  window.addEventListener('mousemove', handleMouseMove, false);
-              }
-              // only when content is visible
-              if (visible) {
-                  if (customScrollListener) {
-                      customScrollListener.addEventListener('scroll', handleMouseMove, false);
-                  }
-                  window.addEventListener('scroll', handleMouseMove, false);
-                  if (closeOnEsc) {
-                      window.addEventListener('keydown', handleEscKey);
-                  }
-              }
+          if (!active)
+              return undefined;
+          window.addEventListener('scroll', handleVisibility, false);
+          if (closeOnEsc) {
+              window.addEventListener('keydown', handleEscKey, false);
           }
           return () => {
-              window.removeEventListener('scroll', handleMouseMove, false);
-              window.removeEventListener('click', handleVisibilityByEventType, false);
-              window.removeEventListener('mousemove', handleMouseMove, false);
+              window.removeEventListener('scroll', handleVisibility, false);
               if (closeOnEsc) {
-                  window.removeEventListener('keydown', handleEscKey);
-              }
-              if (customScrollListener) {
-                  customScrollListener.removeEventListener('scroll', handleMouseMove, false);
+                  window.removeEventListener('keydown', handleEscKey, false);
               }
           };
-      }, [openOn, closeOn, visible, blocked, disabled]);
-      const observeTrigger = (e) => {
-          if (e && e.target && triggerRef.current) {
-              return (triggerRef.current.contains(e.target) || e.target === triggerRef.current);
+      }, [active, customScrollListener]);
+      React.useEffect(() => {
+          // enable overlay manipulation only when the state is NOT blocked=true
+          // nor in disabled state
+          if (blocked || disabled)
+              return undefined;
+          if (openOn === 'click' ||
+              closeOn === 'click' ||
+              closeOn === 'clickOnTrigger' ||
+              closeOn === 'clickOutsideContent') {
+              window.addEventListener('click', handleClick, false);
           }
-          return false;
-      };
-      const observeContent = (e) => {
-          if (e && e.target && contentRef.current) {
-              return (contentRef.current.contains(e.target) || e.target === contentRef.current);
+          if (openOn === 'hover' || closeOn === 'hover') {
+              window.addEventListener('mousemove', handleVisibility, false);
+          }
+          return () => {
+              window.removeEventListener('click', handleClick, false);
+              window.removeEventListener('mousemove', handleVisibility, false);
+          };
+      }, [openOn, closeOn, blocked, disabled]);
+      const isNodeOrChild = (ref) => (e) => {
+          if (e && e.target && ref.current) {
+              return ref.current.contains(e.target) || e.target === ref.current;
           }
           return false;
       };
-      const showContent = React.useCallback(() => {
-          setVisible(true);
-      }, []);
-      const hideContent = React.useCallback(() => {
-          setVisible(false);
-      }, []);
+      const isTrigger = isNodeOrChild(triggerRef);
+      const isContent = isNodeOrChild(contentRef);
       const calculateContentPosition = () => {
-          if (!visible)
+          if (!active)
               return;
           if (!triggerRef.current || !contentRef.current) {
+              if (process.env.NODE_ENV === 'development') {
+                  console.warn('Cannot access `ref` of trigger or content component.');
+              }
               return;
           }
           const triggerDimensions = triggerRef.current.getBoundingClientRect();
@@ -936,21 +924,17 @@
           contentRef.current.style.right = unistyle.value([overlayPosition.right], rootSize);
       };
       const handleVisibilityByEventType = (e) => {
-          if (!visible && !disabled) {
-              if (openOn === 'hover' && e.type === 'mousemove') {
-                  if (observeTrigger(e)) {
-                      showContent();
-                  }
-              }
-              if (openOn === 'click' && e.type === 'click') {
-                  if (observeTrigger(e)) {
+          if (!active) {
+              if ((openOn === 'hover' && e.type === 'mousemove') ||
+                  (openOn === 'click' && e.type === 'click')) {
+                  if (isTrigger(e)) {
                       showContent();
                   }
               }
           }
-          if (visible) {
+          if (active) {
               if (closeOn === 'hover' && e.type === 'mousemove') {
-                  if (!observeTrigger(e) && !observeContent(e)) {
+                  if (!isTrigger(e) && !isContent(e)) {
                       hideContent();
                   }
               }
@@ -961,19 +945,20 @@
                   hideContent();
               }
               if (closeOn === 'clickOnTrigger' && e.type === 'click') {
-                  if (observeTrigger(e)) {
+                  if (isTrigger(e)) {
                       hideContent();
                   }
               }
               if (closeOn === 'clickOutsideContent' && e.type === 'click') {
-                  if (!observeContent(e)) {
+                  if (!isContent(e)) {
                       hideContent();
                   }
               }
           }
       };
       const handleContentPosition = core.throttle(calculateContentPosition, throttleDelay);
-      const handleMouseMove = core.throttle(handleVisibilityByEventType, throttleDelay);
+      const handleClick = React.useCallback(handleVisibilityByEventType, []);
+      const handleVisibility = React.useCallback(core.throttle(handleVisibilityByEventType, throttleDelay), []);
       const handleEscKey = (e) => {
           if (e.key === 'Escape') {
               hideContent();
@@ -982,7 +967,7 @@
       return {
           triggerRef,
           contentRef,
-          active: visible,
+          active,
           align: innerAlign,
           alignX: innerAlignX,
           alignY: innerAlignY,
@@ -994,11 +979,12 @@
       };
   };
 
-  const Component = ({ children, trigger, DOMLocation, triggerRefName = 'ref', contentRefName = 'ref', ...props }) => {
+  const component$1 = ({ children, trigger, DOMLocation, triggerRefName = 'ref', contentRefName = 'ref', ...props }) => {
       const { active, triggerRef, contentRef, showContent, hideContent, align, alignX, alignY, ...ctx } = useOverlay(props);
-      const passHandlers = React.useMemo(() => props.openOn === 'manual' ||
-          props.closeOn === 'manual' ||
-          props.closeOn === 'clickOutsideContent', [props.openOn, props.closeOn]);
+      const { openOn, closeOn } = props;
+      const passHandlers = React.useMemo(() => openOn === 'manual' ||
+          closeOn === 'manual' ||
+          closeOn === 'clickOutsideContent', [openOn, closeOn]);
       return (React__default["default"].createElement(React__default["default"].Fragment, null,
           core.renderContent(trigger, {
               [triggerRefName]: triggerRef,
@@ -1007,10 +993,10 @@
           }),
           false  ));
   };
-  const name$1 = `${PKG_NAME}/Ovelay`;
-  Component.displayName = name$1;
-  Component.pkgName = PKG_NAME;
-  Component.VITUS_LABS__COMPONENT = name$1;
+  const name$1 = `${PKG_NAME}/Overlay`;
+  component$1.displayName = name$1;
+  component$1.pkgName = PKG_NAME;
+  component$1.VITUS_LABS__COMPONENT = name$1;
 
   const styles = ({ css, theme: t }) => css `
   ${t.extraStyles && unistyle.extendCss(t.extraStyles)};
@@ -1044,13 +1030,13 @@
     enumerable: true,
     get: function () { return unistyle.Provider; }
   });
-  exports.Element = component$3;
-  exports.List = Component$2;
-  exports.Overlay = Component;
-  exports.Portal = component$1;
+  exports.Element = component$6;
+  exports.List = component$4;
+  exports.Overlay = component$1;
+  exports.Portal = component$2;
   exports.Text = component;
   exports.useOverlay = useOverlay;
-  exports.withActiveState = Component$1;
+  exports.withActiveState = component$3;
   exports.withEqualSizeBeforeAfter = withEqualBeforeAfter;
 
   Object.defineProperty(exports, '__esModule', { value: true });