@ainias42/react-bootstrap-mobile 1.0.4 → 1.0.6

package/dist/index.js

@@ -121,7 +121,9 @@ function withRestrictedChildren(Component, defaultAllowChildren) {
     return (
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      default_0.createElement(Component, Object.assign({}, newProps), children)
+      default_0.createElement(Component, Object.assign({}, newProps, {
+        __allowChildren: __allowChildren
+      }), children)
     );
   };
   hocComponent.displayName = displayName;
@@ -204,9 +206,9 @@ const ViewWithoutListeners = withMemo(function ViewWithoutListeners(_a) {
 
 ;// ./src/Components/Layout/layout.module.scss
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const layout_module = ({"flex":"flex__Xtdxj","horizontal":"horizontal__HAxyH","grow":"grow__GRH5E","weight0":"weight0__mAhm_","weight1":"weight1__Gvlqz","weight2":"weight2__KF4_k","weight3":"weight3__fZi1h","weight4":"weight4__SUChB","weight5":"weight5__fgiwz","weight6":"weight6__tBvFt","center":"center__JNiHZ","block":"block__OUDP2","inlineBlock":"inlineBlock__C1O3Y","inline":"inline__uUoNu"});
-;// ./src/Components/Layout/Block.tsx
-var Block_rest = undefined && undefined.__rest || function (s, e) {
+/* harmony default export */ const layout_module = ({"flex":"flex__Xtdxj","horizontal":"horizontal__HAxyH","unaligned":"unaligned__jkwMg","fillWidth":"fillWidth__LDtNS","fillHeight":"fillHeight__pkb_S","grow":"grow__GRH5E","weight0":"weight0__mAhm_","weight1":"weight1__Gvlqz","weight2":"weight2__KF4_k","weight3":"weight3__fZi1h","weight4":"weight4__SUChB","weight5":"weight5__fgiwz","weight6":"weight6__tBvFt","center":"center__JNiHZ","block":"block__OUDP2","inlineBlock":"inlineBlock__C1O3Y","inline":"inline__uUoNu"});
+;// ./src/Components/Layout/BaseBlock.tsx
+var BaseBlock_rest = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
@@ -219,7 +221,7 @@ var Block_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
-const Block = withMemo(function Block(_a) {
+const BaseBlock = withMemo(function Block(_a) {
   // Variables
   var {
       children,
@@ -227,7 +229,7 @@ const Block = withMemo(function Block(_a) {
       className,
       ref
     } = _a,
-    props = Block_rest(_a, ["children", "as", "className", "ref"]);
+    props = BaseBlock_rest(_a, ["children", "as", "className", "ref"]);
   // Refs
   // States
   // Selectors
@@ -409,7 +411,7 @@ class ErrorBoundary extends Component {
       if (error instanceof Error) {
         stack = error.stack;
       }
-      return default_0.createElement(Block, null, default_0.createElement(HeadingMemo, null, message), !!stack && showStack && default_0.createElement(tmp, {
+      return default_0.createElement(BaseBlock, null, default_0.createElement(HeadingMemo, null, message), !!stack && showStack && default_0.createElement(tmp, {
         style: {
           whiteSpace: 'pre'
         }
@@ -493,6 +495,99 @@ function useWindow() {
   var _a;
   return (_a = useContext(WindowContext)) !== null && _a !== void 0 ? _a : typeof window !== 'undefined' ? window : undefined;
 }
+;// external "@fortawesome/react-fontawesome"
+
+;// ./src/Components/Icon/icon.module.scss
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const icon_module = ({"margin":"margin__Oq6ib","imgIcon":"imgIcon__B6ZP0","doubleIconContainer":"doubleIconContainer__TzWce","secondIcon":"secondIcon__YwXe_"});
+;// ./src/Components/Icon/BaseIcon.tsx
+var BaseIcon_rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+
+
+
+
+const BaseIcon = withMemo(function BaseIcon(_a) {
+  // Variables
+  var {
+      icon,
+      alt,
+      className,
+      noMargin = true,
+      style,
+      ref
+    } = _a,
+    props = BaseIcon_rest(_a, ["icon", "alt", "className", "noMargin", "style", "ref"]);
+  // States
+  // Refs
+  // Callbacks
+  // Effects
+  // Other
+  if (!alt && typeof icon === 'string') {
+    alt = icon;
+  }
+  // Render Functions
+  if (typeof icon === 'string' && (icon.includes('.') || icon.startsWith('data:'))) {
+    return createElement("img", {
+      src: icon,
+      alt: alt,
+      className: default_1(icon_module.imgIcon, className, {
+        [icon_module.margin]: !noMargin
+      }),
+      style: style,
+      ref: ref
+    });
+  }
+  return createElement(FontAwesomeIcon, Object.assign({}, props, {
+    icon: icon,
+    className: default_1(className, {
+      [icon_module.margin]: !noMargin
+    }),
+    style: style,
+    ref: ref
+  }));
+});
+;// ./src/Components/Layout/BaseInlineBlock.tsx
+var BaseInlineBlock_rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+
+
+
+
+const BaseInlineBlock = withMemo(function BaseInlineBlock(_a) {
+  // Variables
+  var {
+      children,
+      as = 'span',
+      className
+    } = _a,
+    props = BaseInlineBlock_rest(_a, ["children", "as", "className"]);
+  // Refs
+  // States
+  // Selectors
+  // Callbacks
+  // Effects
+  // Other
+  // Render Functions
+  return createElement(ViewWithoutListeners, Object.assign({}, props, {
+    className: default_1(layout_module.inlineBlock, className),
+    as: as
+  }), children);
+});
 ;// ./src/Components/Hooks/useComposedRef.ts
 
 function useComposedRef(...refs) {
@@ -823,9 +918,15 @@ const Flex = withMemo(function Flex(_a) {
       className,
       horizontal = false,
       ref,
-      grow = false
+      grow = false,
+      unaligned = false,
+      fill = false,
+      fillWidth = fill,
+      fillHeight = fill,
+      gap,
+      style
     } = _a,
-    props = Flex_rest(_a, ["children", "as", "className", "horizontal", "ref", "grow"]);
+    props = Flex_rest(_a, ["children", "as", "className", "horizontal", "ref", "grow", "unaligned", "fill", "fillWidth", "fillHeight", "gap", "style"]);
   // States
   // Refs
   // Callbacks
@@ -836,105 +937,18 @@ const Flex = withMemo(function Flex(_a) {
     className: default_1(className, layout_module.flex, {
       [layout_module.horizontal]: horizontal,
       [layout_module.grow]: grow,
-      [layout_module.weight1]: grow
+      [layout_module.weight1]: grow,
+      [layout_module.unaligned]: unaligned,
+      [layout_module.fillWidth]: fillWidth,
+      [layout_module.fillHeight]: fillHeight
     }),
+    style: Object.assign({
+      gap
+    }, style),
     as: as,
     ref: ref
   }, props), children);
 });
-;// external "@fortawesome/react-fontawesome"
-
-;// ./src/Components/Icon/icon.module.scss
-// extracted by mini-css-extract-plugin
-/* harmony default export */ const icon_module = ({"margin":"margin__Oq6ib","imgIcon":"imgIcon__B6ZP0","doubleIconContainer":"doubleIconContainer__TzWce","secondIcon":"secondIcon__YwXe_"});
-;// ./src/Components/Icon/Icon.tsx
-var Icon_rest = undefined && undefined.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
-
-
-
-
-const Icon = withMemo(function Icon(_a) {
-  // Variables
-  var {
-      icon,
-      alt,
-      className,
-      noMargin = true,
-      style,
-      title
-    } = _a,
-    props = Icon_rest(_a, ["icon", "alt", "className", "noMargin", "style", "title"]);
-  // States
-  // Refs
-  // Callbacks
-  // Effects
-  // Other
-  if (!alt && typeof icon === 'string') {
-    alt = icon;
-  }
-  // Render Functions
-  if (typeof icon === 'string' && (icon.includes('.') || icon.startsWith('data:'))) {
-    return createElement("img", {
-      src: icon,
-      alt: alt,
-      className: default_1(icon_module.imgIcon, className, {
-        [icon_module.margin]: !noMargin
-      }),
-      style: style,
-      title: title
-    });
-  }
-  return createElement(FontAwesomeIcon, Object.assign({}, props, {
-    icon: icon,
-    className: default_1(className, {
-      [icon_module.margin]: !noMargin
-    }),
-    style: style,
-    title: title
-  }));
-});
-;// ./src/Components/Layout/InlineBlock.tsx
-var InlineBlock_rest = undefined && undefined.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
-
-
-
-
-const InlineBlock = withMemo(function InlineBlock(_a) {
-  // Variables
-  var {
-      children,
-      as = 'span',
-      className
-    } = _a,
-    props = InlineBlock_rest(_a, ["children", "as", "className"]);
-  // Refs
-  // States
-  // Selectors
-  // Callbacks
-  // Effects
-  // Other
-  // Render Functions
-  return createElement(ViewWithoutListeners, Object.assign({}, props, {
-    className: default_1(layout_module.inlineBlock, className),
-    as: as
-  }), children);
-});
 ;// external "@fortawesome/free-solid-svg-icons"
 
 ;// ./src/scss/baseClasses.module.scss
@@ -995,9 +1009,9 @@ const ActionSheet = withMemo(function ActionSheet({
     }),
     onClick: onActionClick,
     onClickData: action
-  }, createElement(InlineBlock, {
+  }, createElement(BaseInlineBlock, {
     className: actionSheet_module.actionIcon
-  }, action.icon ? createElement(Icon, {
+  }, action.icon ? createElement(BaseIcon, {
     icon: action.icon
   }) : null), createElement(tmp, {
     className: actionSheet_module.actionName
@@ -1013,15 +1027,15 @@ const ActionSheet = withMemo(function ActionSheet({
     className: baseClasses_module.fullHeight
   }, createElement(Flex, {
     className: actionSheet_module.content
-  }, title ? createElement(Block, {
+  }, title ? createElement(BaseBlock, {
     className: actionSheet_module.title
   }, createElement(tmp, null, title)) : null, actions.map(renderAction), createElement(Clickable, {
     className: actionSheet_module.cancel,
     onClick: () => console.log('Cancel clicked'),
     __allowChildren: "all"
-  }, createElement(InlineBlock, {
+  }, createElement(BaseInlineBlock, {
     className: actionSheet_module.actionIcon
-  }, createElement(Icon, {
+  }, createElement(BaseIcon, {
     icon: faTimes
   })), cancelText))));
 });
@@ -1096,15 +1110,15 @@ function ButtonDialog({
   // Effects
   // Other
   // Render Functions
-  return createElement(Block, {
+  return createElement(BaseBlock, {
     className: default_1(buttonDialog_module.buttonDialog, className),
     style: style
-  }, !!title && createElement(Block, null, createElement(tmp, {
+  }, !!title && createElement(BaseBlock, null, createElement(tmp, {
     size: TEXT_SIZE.large,
     className: buttonDialog_module.title
-  }, title)), createElement(Block, null, createElement(tmp, {
+  }, title)), createElement(BaseBlock, null, createElement(tmp, {
     className: buttonDialog_module.message
-  }, message)), extraContent, createElement(Block, {
+  }, message)), extraContent, createElement(BaseBlock, {
     className: buttonDialog_module.buttonContainer
   }, buttons.map((b, i) => {
     var _a;
@@ -1228,7 +1242,7 @@ function Dialog({
   if (isClosed) {
     return null;
   }
-  return createElement(Block, {
+  return createElement(BaseBlock, {
     className: default_1(dialog_module.dialogContainer, className),
     __allowChildren: "all",
     style: style
@@ -1236,7 +1250,7 @@ function Dialog({
     onClick: onCurtainClick,
     className: dialog_module.closeCurtain,
     interactable: closable
-  }), createElement(InlineBlock, {
+  }), createElement(BaseInlineBlock, {
     __allowChildren: "all",
     className: dialog_module.dialog
   }, Children.map(children, child => {
@@ -1318,7 +1332,7 @@ const DialogBackground = withMemo(function DialogBackground({
   // Effects
   // Other
   // Render Functions
-  return createElement(Block, {
+  return createElement(BaseBlock, {
     __allowChildren: "all",
     className: default_1(dialogBackground_module.dialogBackground, className),
     style: style
@@ -1327,7 +1341,7 @@ const DialogBackground = withMemo(function DialogBackground({
     className: dialogBackground_module.title
   }, !!title && createElement(Grow, null, createElement(HeadingMemo, null, title)), !!onClose && createElement(Clickable, {
     onClick: onClose
-  }, createElement(Icon, {
+  }, createElement(BaseIcon, {
     size: "lg",
     icon: faCircleXmark
   }))), children);
@@ -1395,7 +1409,7 @@ const DialogContainer = withMemo(function DialogContainer({
   // Render Functions
   return createElement(DialogProvider, {
     value: showDialog
-  }, children, createElement(Block, {
+  }, children, createElement(BaseBlock, {
     className: dialogClassName
   }, dialogs.map(d => {
     const DialogComponent = d.component;
@@ -1732,7 +1746,7 @@ function useDelayed(callback, dependencies, delay = 100, maxDelay = undefined) {
   const maxDelayTimeout = useRef(undefined);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const realCB = useCallback(callback, dependencies);
-  const func = useCallback((...newArgs) => {
+  return useCallback((...newArgs) => {
     argsRef.current = newArgs;
     const triggerFunc = () => {
       clearTimeout(mayDelayTimeoutRef.current);
@@ -1741,19 +1755,21 @@ function useDelayed(callback, dependencies, delay = 100, maxDelay = undefined) {
       maxDelayTimeout.current = undefined;
       if (argsRef.current !== undefined) {
         realCB(...argsRef.current);
+        argsRef.current = undefined;
       }
     };
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
     }
-    timeoutRef.current = setTimeout(triggerFunc, delay);
+    timeoutRef.current = setTimeout(() => {
+      triggerFunc();
+    }, delay);
     if (maxDelay && maxDelayTimeout.current === undefined) {
       maxDelayTimeout.current = setTimeout(() => {
         triggerFunc();
       }, maxDelay);
     }
   }, [delay, maxDelay, realCB]);
-  return func;
 }
 ;// ./src/Components/Hooks/useDelayedEffect.ts
 
@@ -1983,17 +1999,236 @@ const DoubleIcon = withMemo(function DoubleIcon(_a) {
   // Effects
   // Other
   // RenderFunctions
-  return default_0.createElement(InlineBlock, {
+  return default_0.createElement(BaseInlineBlock, {
     className: icon_module.doubleIconContainer
-  }, default_0.createElement(Icon, Object.assign({}, otherProps, {
+  }, default_0.createElement(BaseIcon, Object.assign({}, otherProps, {
     color: color
-  })), default_0.createElement(Icon, {
+  })), default_0.createElement(BaseIcon, {
     icon: secondIcon,
     size: "xs",
     className: icon_module.secondIcon,
     color: secondIconColor !== null && secondIconColor !== void 0 ? secondIconColor : color
   }));
 });
+;// ./src/Components/Title/hoverTitle.module.scss
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const hoverTitle_module = ({"title":"title__I36WU"});
+;// ./src/Components/Title/HoverTitle.tsx
+
+
+
+
+
+
+const HoverTitle = withMemo(function HoverTitle({
+  children,
+  baseElement,
+  isOpen,
+  onClose
+}) {
+  // Refs
+  const titleRef = useRef(null);
+  // States/Variables/Selectors
+  const [top, setTop] = useState(0);
+  const [left, setLeft] = useState(0);
+  const window = useWindow();
+  // Callbacks
+  // Effects
+  useEffect(() => {
+    if (!isOpen) {
+      return undefined;
+    }
+    const listener = e => {
+      var _a;
+      if (!((_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+        onClose();
+      }
+    };
+    window === null || window === void 0 ? void 0 : window.addEventListener('mousedown', listener, {
+      capture: true
+    });
+    window === null || window === void 0 ? void 0 : window.addEventListener('touchstart', listener, {
+      capture: true
+    });
+    return () => {
+      window === null || window === void 0 ? void 0 : window.removeEventListener('mousedown', listener, {
+        capture: true
+      });
+      window === null || window === void 0 ? void 0 : window.removeEventListener('touchstart', listener, {
+        capture: true
+      });
+    };
+  }, [isOpen, onClose, window]);
+  useClientLayoutEffect(() => {
+    if (!titleRef.current || !baseElement.current || !isOpen) {
+      return undefined;
+    }
+    const titleElement = titleRef.current;
+    const base = baseElement.current;
+    const updateInnerPositions = () => {
+      var _a, _b;
+      const computedStyleElement = base.getBoundingClientRect();
+      const computedStyleTitle = getComputedStyle(titleElement);
+      const height = Number.parseFloat(computedStyleTitle.height);
+      let newY = computedStyleElement.top - height;
+      if (newY < 0) {
+        newY = computedStyleElement.top + computedStyleElement.height;
+      }
+      setTop(Math.min((_a = window === null || window === void 0 ? void 0 : window.innerHeight) !== null && _a !== void 0 ? _a : 1600, newY));
+      const width = Number.parseFloat(computedStyleTitle.width);
+      let newX = computedStyleElement.left;
+      if (newX > ((_b = window === null || window === void 0 ? void 0 : window.innerWidth) !== null && _b !== void 0 ? _b : 0) - width) {
+        newX -= width;
+      }
+      setLeft(Math.max(0, newX));
+    };
+    const observer = new ResizeObserver(() => {
+      updateInnerPositions();
+    });
+    observer.observe(titleElement);
+    observer.observe(base);
+    updateInnerPositions();
+    return () => {
+      observer.disconnect();
+    };
+  }, [window, baseElement, isOpen]);
+  // Other
+  // RenderFunctions
+  if (!isOpen || !children) {
+    return null;
+  }
+  return default_0.createElement(BaseInlineBlock, {
+    ref: titleRef,
+    style: {
+      top,
+      left
+    },
+    className: hoverTitle_module.title
+  }, children);
+});
+;// ./src/Components/Menu/useHoverMenu.ts
+
+function useHoverMenu({
+  openToSide,
+  ref
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0
+  });
+  const [offset, setOffset] = useState({
+    x: 0,
+    y: 0
+  });
+  // Dispatch
+  // Callbacks
+  const recalculatePosition = useCallback(() => {
+    if (!ref.current) {
+      return;
+    }
+    const {
+      top,
+      left,
+      bottom,
+      right,
+      width,
+      height
+    } = ref.current.getBoundingClientRect();
+    if (openToSide) {
+      setPosition({
+        x: right,
+        y: top
+      });
+      setOffset({
+        x: width,
+        y: -height
+      });
+    } else {
+      setPosition({
+        x: left,
+        y: bottom
+      });
+      setOffset({
+        x: -width,
+        y: height
+      });
+    }
+  }, [openToSide, ref]);
+  const close = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const open = useCallback(() => {
+    recalculatePosition();
+    setIsOpen(true);
+  }, [recalculatePosition]);
+  return {
+    isOpen,
+    position,
+    open,
+    close,
+    offset
+  };
+}
+;// ./src/Components/Title/withTitle.tsx
+var withTitle_rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+
+
+
+
+
+function withTitle(Comp) {
+  return withMemo(_a => {
+    var {
+        title,
+        ref
+      } = _a,
+      otherProps = withTitle_rest(_a, ["title", "ref"]);
+    const titleRef = useRef(null);
+    const composedRef = useComposedRef(titleRef, ref);
+    const titleElement = typeof title === 'string' ? default_0.createElement(tmp, {
+      size: TEXT_SIZE.small
+    }, title.trim()) : title;
+    const {
+      isOpen,
+      open,
+      close
+    } = useHoverMenu({
+      ref: titleRef
+    });
+    useEffect(() => {
+      const element = titleRef.current;
+      if (!element || !title) {
+        return undefined;
+      }
+      element.addEventListener('mouseenter', open);
+      element.addEventListener('mouseleave', close);
+      return () => {
+        element.removeEventListener('mouseenter', open);
+        element.removeEventListener('mouseleave', close);
+      };
+    }, [close, open, title]);
+    return default_0.createElement(default_0.Fragment, null, default_0.createElement(Comp, Object.assign({}, otherProps, {
+      ref: composedRef
+    })), default_0.createElement(HoverTitle, {
+      baseElement: titleRef,
+      isOpen: isOpen,
+      onClose: close
+    }, titleElement));
+  });
+}
+;// ./src/Components/Icon/Icon.ts
+
+
+const Icon = withTitle(BaseIcon);
 ;// ./src/Components/Image/image.module.scss
 // extracted by mini-css-extract-plugin
 /* harmony default export */ const image_module = ({"image":"image__L7PA6"});
@@ -2085,6 +2320,14 @@ function InViewport({
 }
 const InViewportMemo = withMemo(InViewport);
 
+;// ./src/Components/Layout/Block.ts
+
+
+const Block = withTitle(BaseBlock);
+;// ./src/Components/Layout/InlineBlock.ts
+
+
+const InlineBlock = withTitle(BaseInlineBlock);
 ;// ./src/Components/LoadingCircle/loadingCircle.module.scss
 // extracted by mini-css-extract-plugin
 /* harmony default export */ const loadingCircle_module = ({"loadingCircle":"loadingCircle__XRvFa","spinner":"spinner__xIW3U","loadingCircleRotate":"loadingCircleRotate__DF8JT"});
@@ -2253,9 +2496,9 @@ const MenuItem = withMemo(function MenuItem(_a) {
     onMouseEnter: onMouseEnterInner,
     onMouseLeave: onMouseLeaveInner,
     __allowChildren: "all"
-  }), default_0.createElement(Block, {
+  }), default_0.createElement(BaseBlock, {
     className: default_1(menu_module.itemChildren)
-  }, !!icon && default_0.createElement(Icon, {
+  }, !!icon && default_0.createElement(BaseIcon, {
     icon: icon,
     color: iconColor,
     className: menu_module.icon
@@ -2374,7 +2617,7 @@ const Menu = withMemo(withRenderBrowserOnly(function Menu({
   }
   return createElement(Fragment, null, createPortal(createElement(MenuCloseContextProvider, {
     value: onClose
-  }, createElement(Block, {
+  }, createElement(BaseBlock, {
     className: default_1(className, menu_module.menu),
     style: Object.assign(Object.assign({}, style), {
       top: innerY,
@@ -2403,6 +2646,7 @@ const Menu = withMemo(withRenderBrowserOnly(function Menu({
 
 
 
+
 const HoverMenu = withMemo(function HoverMenu({
   children,
   items,
@@ -2415,57 +2659,22 @@ const HoverMenu = withMemo(function HoverMenu({
   // Refs
   // States/Variables/Selectors
   const hoverItemRef = useRef(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const [position, setPosition] = useState({
-    x: 0,
-    y: 0
-  });
-  const [offset, setOffset] = useState({
-    x: 0,
-    y: 0
+  const {
+    isOpen,
+    position,
+    offset,
+    open,
+    close
+  } = useHoverMenu({
+    ref: hoverItemRef,
+    openToSide
   });
   // Dispatch
   // Callbacks
-  const recalculatePosition = useCallback(() => {
-    if (!hoverItemRef.current) {
-      return;
-    }
-    const {
-      top,
-      left,
-      bottom,
-      right,
-      width,
-      height
-    } = hoverItemRef.current.getBoundingClientRect();
-    if (openToSide) {
-      setPosition({
-        x: right,
-        y: top
-      });
-      setOffset({
-        x: width,
-        y: -height
-      });
-    } else {
-      setPosition({
-        x: left,
-        y: bottom
-      });
-      setOffset({
-        x: -width,
-        y: height
-      });
-    }
-  }, [openToSide]);
-  const close = useCallback(() => {
-    setIsOpen(false);
+  const innerOnClose = useCallback(() => {
+    close();
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose]);
-  const open = useCallback(() => {
-    recalculatePosition();
-    setIsOpen(true);
-  }, [recalculatePosition]);
+  }, [onClose, close]);
   const onClickInner = useCallback(() => {
     if ((onClick === null || onClick === void 0 ? void 0 : onClick()) !== false) {
       open();
@@ -2476,7 +2685,7 @@ const HoverMenu = withMemo(function HoverMenu({
   // RenderFunctions
   return default_0.createElement(Clickable, {
     onMouseEnter: open,
-    onMouseLeave: close,
+    onMouseLeave: innerOnClose,
     useReactOnMouseLeave: true,
     onClick: onClickInner,
     className: default_1(menu_module.hoverMenu, {
@@ -2489,7 +2698,7 @@ const HoverMenu = withMemo(function HoverMenu({
     x: position.x,
     y: position.y,
     isOpen: true,
-    onClose: close,
+    onClose: innerOnClose,
     offsetX: offset.x,
     offsetY: offset.y,
     className: default_1({
@@ -2510,7 +2719,7 @@ const MenuDivider = withMemo(function MenuDivider() {
   // Effects
   // Other
   // RenderFunctions
-  return default_0.createElement(Block, {
+  return default_0.createElement(BaseBlock, {
     className: menu_module.divider
   });
 });
@@ -2595,13 +2804,13 @@ const Submenu = withMemo(function Submenu({
     ref: submenuRef,
     className: default_1(menu_module.itemChildren),
     horizontal: true
-  }, !!icon && default_0.createElement(Icon, {
+  }, !!icon && default_0.createElement(BaseIcon, {
     icon: icon,
     color: iconColor,
     className: menu_module.icon
-  }), default_0.createElement(Grow, null, default_0.createElement(tmp, null, label)), default_0.createElement(Icon, {
+  }), default_0.createElement(Grow, null, default_0.createElement(tmp, null, label)), default_0.createElement(BaseIcon, {
     icon: faChevronRight
-  })), default_0.createElement(Block, {
+  })), default_0.createElement(BaseBlock, {
     className: menu_module.container,
     __allowChildren: "all",
     ref: containerRef
@@ -2655,7 +2864,7 @@ function SizeCalculator({
   }, [onSize]);
   // Other
   // Render Functions
-  return createElement(InlineBlock, {
+  return createElement(BaseInlineBlock, {
     ref: ref,
     __allowChildren: "all",
     style: {
@@ -2715,7 +2924,7 @@ const Spoiler = withMemo(function Spoiler(_a) {
   // Selectors
   // Callbacks
   const onClickListener = useListener('onClick', listenerProps);
-  const toggleOpen = useCallback(ev => {
+  const toggleOpen = useCallback(_ => {
     if (open !== undefined) {
       onClickListener === null || onClickListener === void 0 ? void 0 : onClickListener(!open);
     } else {
@@ -2752,12 +2961,12 @@ const Spoiler = withMemo(function Spoiler(_a) {
     horizontal: true
   }, createElement(Grow, {
     __allowChildren: "all"
-  }, titleComponent), icon ? createElement(Icon, {
+  }, titleComponent), icon ? createElement(BaseIcon, {
     icon: icon,
     className: spoiler_module.icon
-  }) : null)), createElement(Block, {
+  }) : null)), createElement(BaseBlock, {
     className: spoiler_module.bodyContainer
-  }, createElement(Block, {
+  }, createElement(BaseBlock, {
     __allowChildren: "all",
     className: spoiler_module.body
   }, children)));
@@ -2811,7 +3020,7 @@ const SpoilerList = withMemo(function SpoilerList({
   // Effects
   // Other
   // Render Functions
-  return createElement(Block, {
+  return createElement(BaseBlock, {
     className: default_1(className),
     style: style
   }, data.map(item => createElement(Spoiler, Object.assign({
@@ -2896,7 +3105,7 @@ function getButtonComponents(buttons, activeTab, onSelect) {
       active: isActive,
       onClickData: index,
       onClick: onSelect
-    }, createElement(Inline, null, button.icon ? createElement(Icon, {
+    }, createElement(Inline, null, button.icon ? createElement(BaseIcon, {
       icon: button.icon,
       className: tabBar_module.buttonIcon
     }) : null, button.title ? createElement(tmp, {
@@ -3260,10 +3469,10 @@ const MoreButton = withMemo(function MoreButton({
     disabled: disabled,
     className: className,
     style: style
-  }, createElement(Icon, {
+  }, createElement(BaseIcon, {
     icon: faEllipsisH,
     className: baseClasses_module.materialHidden
-  }), createElement(Icon, {
+  }), createElement(BaseIcon, {
     icon: faEllipsisV,
     className: baseClasses_module.flatHidden
   }));
@@ -3305,7 +3514,7 @@ function TopBar_getButtonComponents(buttons) {
     }
     let child = button.title;
     if (button.icon) {
-      child = createElement(Icon, {
+      child = createElement(BaseIcon, {
         icon: button.icon
       });
     }
@@ -3403,7 +3612,7 @@ const TopBar = withMemo(function TopBar(_a) {
     grow: true,
     className: default_1(topBar_module.buttonContainer, topBar_module.left),
     horizontal: true
-  }, leftButtonComponents), createElement(Block, {
+  }, leftButtonComponents), createElement(BaseBlock, {
     className: topBar_module.titleContainer
   }, createElement(tmp, {
     className: topBar_module.title
@@ -3453,7 +3662,7 @@ var Button_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
-const Button = withMemo(function Button(_a) {
+const Button = withTitle(function Button(_a) {
   var {
       children,
       className,
@@ -3512,13 +3721,13 @@ const FormError = withMemo(function FormError({
     return null;
   }
   if (inline) {
-    return default_0.createElement(InlineBlock, {
+    return default_0.createElement(BaseInlineBlock, {
       className: formError_module.error
     }, default_0.createElement(tmp, {
       size: TEXT_SIZE.small
     }, error));
   }
-  return default_0.createElement(Block, {
+  return default_0.createElement(BaseBlock, {
     className: formError_module.error
   }, default_0.createElement(tmp, {
     size: TEXT_SIZE.small
@@ -4011,9 +4220,9 @@ const MultipleFileInput = withMemo(function MultipleImageInput(_a) {
         className: default_1(fileInput_module.previewImage)
       });
     }
-    return createElement(Block, {
+    return createElement(BaseBlock, {
       className: fileInput_module.previewText
-    }, createElement(Icon, {
+    }, createElement(BaseIcon, {
       icon: faFile,
       className: fileInput_module.previewTextIcon
     }), createElement(tmp, null, file.name));
@@ -4045,7 +4254,7 @@ const MultipleFileInput = withMemo(function MultipleImageInput(_a) {
       className: fileInput_module.previewRemove,
       onClick: removeFile,
       onClickData: index
-    }, createElement(Icon, {
+    }, createElement(BaseIcon, {
       icon: faTimesCircle
     }))));
   }), createElement(Grow, {
@@ -4060,7 +4269,7 @@ const MultipleFileInput = withMemo(function MultipleImageInput(_a) {
     onDropData: maxFiles,
     onClick: clickOnFile,
     __allowChildren: "html"
-  }, createElement(Icon, {
+  }, createElement(BaseIcon, {
     icon: faPlus
   }), createElement("input", Object.assign({}, props, {
     ref: inputRef,
@@ -4528,7 +4737,7 @@ const PasswordInput = withMemo(function PasswordInput(_a) {
     onClick: toggleVisible,
     className: passwordInput_module.showButton,
     interactable: false
-  }, default_0.createElement(Icon, {
+  }, default_0.createElement(BaseIcon, {
     icon: isVisible ? faEye : faEyeSlash
   })));
 });
@@ -5056,7 +5265,7 @@ const SearchSelectInput = withMemo(function SearchSelectInput({
     if (!option) {
       return null;
     }
-    const element = (_a = renderSelectedOption === null || renderSelectedOption === void 0 ? void 0 : renderSelectedOption(option)) !== null && _a !== void 0 ? _a : createElement(InlineBlock, {
+    const element = (_a = renderSelectedOption === null || renderSelectedOption === void 0 ? void 0 : renderSelectedOption(option)) !== null && _a !== void 0 ? _a : createElement(BaseInlineBlock, {
       className: seachSelectInput_module.tag
     }, createElement(tmp, {
       size: TEXT_SIZE.xSmall
@@ -5073,7 +5282,7 @@ const SearchSelectInput = withMemo(function SearchSelectInput({
   const renderSelectableOption = (opt, index) => {
     var _a;
     const isActive = index === selectedIndex;
-    const element = (_a = renderSelectableOptions === null || renderSelectableOptions === void 0 ? void 0 : renderSelectableOptions(opt, isActive, index, selectedIndex)) !== null && _a !== void 0 ? _a : createElement(Block, {
+    const element = (_a = renderSelectableOptions === null || renderSelectableOptions === void 0 ? void 0 : renderSelectableOptions(opt, isActive, index, selectedIndex)) !== null && _a !== void 0 ? _a : createElement(BaseBlock, {
       className: default_1(seachSelectInput_module.selectableOption, {
         [seachSelectInput_module.active]: index === selectedIndex
       })
@@ -5096,7 +5305,7 @@ const SearchSelectInput = withMemo(function SearchSelectInput({
     }, label) : null, createElement(Flex, {
       className: seachSelectInput_module.inputContainer,
       horizontal: true
-    }, createElement(InlineBlock, null, values.map(renderOption)), createElement(Grow, {
+    }, createElement(BaseInlineBlock, null, values.map(renderOption)), createElement(Grow, {
       __allowChildren: "html"
     }, createElement("input", {
       ref: inputRef,
@@ -5107,7 +5316,7 @@ const SearchSelectInput = withMemo(function SearchSelectInput({
       onChange: onChange,
       onKeyDown: onKeyPress,
       onFocus: onFocus
-    }))), createElement(InlineBlock, {
+    }))), createElement(BaseInlineBlock, {
       className: seachSelectInput_module.selectableOptionContainer,
       style: suggestionsPosition
     }, selectableOptions.map(renderSelectableOption)))
@@ -5145,7 +5354,7 @@ const Grid = withMemo(function Grid({
   // Effects
   // Other
   // Render Functions
-  return createElement(Block, {
+  return createElement(BaseBlock, {
     ref: ref,
     style: appliedStyle,
     className: default_1(grid_module.grid, className, {
@@ -5268,7 +5477,7 @@ function GridItem({
   // Effects
   // Other
   // Render Functions
-  return createElement(InlineBlock, {
+  return createElement(BaseInlineBlock, {
     style: style,
     className: default_1(...classes.map(name => grid_module[name]), grid_module.item, className),
     __allowChildren: __allowChildren
@@ -5395,6 +5604,12 @@ const GridItemMemo = withMemo(GridItem);
 
 
 
-export { ActionSheet, AlertDialog, Block, BreakpointNames, Breakpoints, Button, ButtonDialogMemo as ButtonDialog, ButtonType, CONTAINER_CLASSES, Card, Characters, Checkbox, Clickable, ColorInput, ColorInputController, ConfirmDialog, Container, DialogMemo as Dialog, DialogBackground, DialogContainer, DialogProvider, DoubleIcon, DragItemMemo as DragItem, DropArea, ErrorBoundary, FileInput, FileInputController, Flavor, Flex, FormError, FullScreen, Grid, GridItemMemo as GridItem, Grow, HeadingMemo as Heading, HiddenInput, HookForm, HoverMenu, Icon, Image, InViewportMemo as InViewport, Inline, InlineBlock, Input, InputController, LoadingArea, LoadingCircle, MENU_CONTAINER_CLASS, Menu, MenuCloseContextProvider, MenuDivider, MenuItem, MoreButton, MultipleFileInput, MultipleFileInputController, PasswordInput, PasswordInputController, RESTRICT_CHILDREN, SearchSelectInput, Select, SelectController, SendFormContext, Size, SizeCalculatorMemo as SizeCalculator, Slider, SliderController, Spoiler, SpoilerList, Submenu, Switch, SwitchController, TEXT_PRIO, TEXT_SIZE, TabBar, TabBarButton, Table_tmp as Table, tmp as Text, Textarea, TextareaController, Toast, ToastContainerMemo as ToastContainer, ToastContext, TopBar, TopBarButton, View, ViewWithoutListeners, WindowContext, WrongChildError, memoComparator, nonEmptyString, treeshakeTest, useAlertDialog, useBreakpoint, useBreakpointSelect, useClientLayoutEffect, useComposedRef, useConfirmDialog, useDebounced, useDeepShallow, useDelayed, useDelayedEffect, useDelayedState, useDialog, useInViewport, useKeyListener, useKeyPressed, useKeyUpListener, useListener, useListenerWithExtractedProps, useMenu, useMenuClose, useMousePosition, useOnChangeDone, useOnMount, useOnce, useRerender, useSendFormContext, useSharedSelectedColor, useSpoilerGroup, useStrictEnabled, useToast, useWindow, useWindowDimensions, useYupResolver, withHookController, withMemo, withRenderBrowserOnly, withRestrictedChildren };
+
+
+
+
+
+
+export { ActionSheet, AlertDialog, BaseBlock, BaseIcon, BaseInlineBlock, Block, BreakpointNames, Breakpoints, Button, ButtonDialogMemo as ButtonDialog, ButtonType, CONTAINER_CLASSES, Card, Characters, Checkbox, Clickable, ColorInput, ColorInputController, ConfirmDialog, Container, DialogMemo as Dialog, DialogBackground, DialogContainer, DialogProvider, DoubleIcon, DragItemMemo as DragItem, DropArea, ErrorBoundary, FileInput, FileInputController, Flavor, Flex, FormError, FullScreen, Grid, GridItemMemo as GridItem, Grow, HeadingMemo as Heading, HiddenInput, HookForm, HoverMenu, HoverTitle, Icon, Image, InViewportMemo as InViewport, Inline, InlineBlock, Input, InputController, LoadingArea, LoadingCircle, MENU_CONTAINER_CLASS, Menu, MenuCloseContextProvider, MenuDivider, MenuItem, MoreButton, MultipleFileInput, MultipleFileInputController, PasswordInput, PasswordInputController, RESTRICT_CHILDREN, SearchSelectInput, Select, SelectController, SendFormContext, Size, SizeCalculatorMemo as SizeCalculator, Slider, SliderController, Spoiler, SpoilerList, Submenu, Switch, SwitchController, TEXT_PRIO, TEXT_SIZE, TabBar, TabBarButton, Table_tmp as Table, tmp as Text, Textarea, TextareaController, Toast, ToastContainerMemo as ToastContainer, ToastContext, TopBar, TopBarButton, View, ViewWithoutListeners, WindowContext, WrongChildError, memoComparator, nonEmptyString, treeshakeTest, useAlertDialog, useBreakpoint, useBreakpointSelect, useClientLayoutEffect, useComposedRef, useConfirmDialog, useDebounced, useDeepShallow, useDelayed, useDelayedEffect, useDelayedState, useDialog, useHoverMenu, useInViewport, useKeyListener, useKeyPressed, useKeyUpListener, useListener, useListenerWithExtractedProps, useMenu, useMenuClose, useMousePosition, useOnChangeDone, useOnMount, useOnce, useRerender, useSendFormContext, useSharedSelectedColor, useSpoilerGroup, useStrictEnabled, useToast, useWindow, useWindowDimensions, useYupResolver, withHookController, withMemo, withRenderBrowserOnly, withRestrictedChildren, withTitle };
 
 //# sourceMappingURL=index.js.map