quix-ui 1.2.9 → 1.3.0

package/dist/components/layout/hooks/useElementSize.d.ts

@@ -1,18 +1,7 @@
-export default function useElementSize<T extends HTMLElement>(): readonly [import("react").RefObject<T | null>, {
+declare function useWindowEvent(type: keyof WindowEventMap, listener: () => void, options: any): void;
+export { useWindowEvent };
+declare function useViewportSize(): {
     width: number;
     height: number;
-}];
-export declare class WindowSize {
-    size: {
-        width: number;
-        height: number;
-    };
-    constructor();
-    resizeWindow(): void;
-    update(): {
-        width: number;
-        height: number;
-    }[];
-    destroy(): void;
-}
-export declare const useWindowSize: WindowSize;
+};
+export { useViewportSize };

package/dist/global/hooks/esm/use-click-outside/use-click-outside.d.ts

@@ -0,0 +1,2 @@
+declare function useClickOutside(callback: (event: any) => void, events: any, nodes: any): import("react").RefObject<HTMLDivElement | null>;
+export { useClickOutside };

package/dist/index.js

@@ -1,8 +1,15 @@
 import { jsx as jsx$1, jsxs } from 'react/jsx-runtime';
 import * as React3 from 'react';
-import { forwardRef, useContext } from 'react';
-import { useViewportSize } from '@mantine/hooks';
+import { forwardRef, useContext, useState, useCallback, useEffect } from 'react';
 
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
@@ -11,6 +18,33 @@ function _defineProperty(e, r, t) {
     writable: true
   }) : e[r] = t, e;
 }
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+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 ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -32,6 +66,9 @@ function _objectSpread2(e) {
   }
   return e;
 }
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
 function _taggedTemplateLiteral(e, t) {
   return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
     raw: {
@@ -53,6 +90,13 @@ function _toPropertyKey(t) {
   var i = _toPrimitive(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -3936,6 +3980,37 @@ keyframes`
   }
 `;
 
+function useWindowEvent(type, listener, options) {
+  useEffect(function () {
+    window.addEventListener(type, listener, options);
+    return function () {
+      return window.removeEventListener(type, listener, options);
+    };
+  }, [type, listener]);
+}
+var eventListerOptions = {
+  passive: true
+};
+function useViewportSize() {
+  var _useState = useState({
+      width: 0,
+      height: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    windowSize = _useState2[0],
+    setWindowSize = _useState2[1];
+  var setSize = useCallback(function () {
+    setWindowSize({
+      width: window.innerWidth || 0,
+      height: window.innerHeight || 0
+    });
+  }, []);
+  useWindowEvent("resize", setSize, eventListerOptions);
+  useWindowEvent("orientationchange", setSize, eventListerOptions);
+  useEffect(setSize, []);
+  return windowSize;
+}
+
 var _templateObject, _templateObject2, _templateObject3;
 function Layout(props) {
   var _header$height, _header$height2, _sideMenu$width$table, _sideMenu$width, _sideMenu$width$deskt, _sideMenu$width2, _sideMenu$width$deskt2, _sideMenu$width3;
@@ -4095,3 +4170,26 @@ function Layout(props) {
 }
 
 export { Buttons, FlexView, Layout };
+ header.children && (header === null || header === void 0 ? void 0 : header.children())
+    }), sideMenu && SideMenu({
+      sideMenu: sideMenu,
+      top: ((_header$height = header === null || header === void 0 ? void 0 : header.height) !== null && _header$height !== void 0 ? _header$height : 80) + 20
+    }), jsxRuntime.jsx(Content, {
+      style: {
+        position: 'absolute',
+        left: size.width < 450 ? 0 : size.width < 850 ? sideMenu === null || sideMenu === void 0 ? void 0 : sideMenu.width.tablet : size.width > 850 ? sideMenu === null || sideMenu === void 0 ? void 0 : sideMenu.width.desktop : 300,
+        top: ((_header$height2 = header === null || header === void 0 ? void 0 : header.height) !== null && _header$height2 !== void 0 ? _header$height2 : 80) + 20,
+        padding: 10,
+        height: Number(size.height) - (Number(header === null || header === void 0 ? void 0 : header.height) + 70),
+        margin: 5,
+        zIndex: 10,
+        width: size.width - ((size.width < 450 ? Number(0) : size.width < 850 ? Number((_sideMenu$width$table = sideMenu === null || sideMenu === void 0 || (_sideMenu$width = sideMenu.width) === null || _sideMenu$width === void 0 ? void 0 : _sideMenu$width.tablet) !== null && _sideMenu$width$table !== void 0 ? _sideMenu$width$table : 60) : size.width > 850 ? Number((_sideMenu$width$deskt = sideMenu === null || sideMenu === void 0 || (_sideMenu$width2 = sideMenu.width) === null || _sideMenu$width2 === void 0 ? void 0 : _sideMenu$width2.desktop) !== null && _sideMenu$width$deskt !== void 0 ? _sideMenu$width$deskt : 300) : Number((_sideMenu$width$deskt2 = sideMenu === null || sideMenu === void 0 || (_sideMenu$width3 = sideMenu.width) === null || _sideMenu$width3 === void 0 ? void 0 : _sideMenu$width3.desktop) !== null && _sideMenu$width$deskt2 !== void 0 ? _sideMenu$width$deskt2 : 300)) + 30)
+      },
+      children: content && content()
+    })]
+  });
+}
+
+exports.Buttons = Buttons;
+exports.FlexView = FlexView;
+exports.Layout = Layout;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quix-ui",
-  "version": "1.2.9",
+  "version": "1.3.0",
   "description": "This is a react component library.",
   "type": "module",
   "main": "dist/index.js",
@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "build": "vite build",
-    "rollup": " rimraf dist && rollup -c",
+    "rollup": " rimraf dist && rollup -c -w",
     "test": "jest --watchAll --verbose",
     "ui": "storybook dev -p 6006",
     "build-storybook": "storybook build",