ar-design 0.1.84 → 0.1.85

package/dist/assets/css/components/data-display/table/styles.css

@@ -101,6 +101,7 @@
 }
 .ar-table > .content > table > thead > tr > th.selection-col {
   width: 2rem;
+  z-index: 3;
 }
 .ar-table > .content > table > thead > tr > th.type-of-number {
   text-align: right;

package/dist/assets/css/components/feedback/modal/media-queries/medium.css

@@ -0,0 +1,11 @@
+@media (width <= 991px) {
+  .ar-modal-wrapper > .ar-modal.large {
+    width: 75%;
+  }
+  .ar-modal-wrapper > .ar-modal.normal {
+    width: 520px;
+  }
+  .ar-modal-wrapper > .ar-modal.small {
+    width: 25%;
+  }
+}

package/dist/assets/css/components/feedback/modal/media-queries/small.css

@@ -0,0 +1,11 @@
+@media (width <= 767px) {
+  .ar-modal-wrapper > .ar-modal.large {
+    width: 95% !important;
+  }
+  .ar-modal-wrapper > .ar-modal.normal {
+    width: 95% !important;
+  }
+  .ar-modal-wrapper > .ar-modal.small {
+    width: 95% !important;
+  }
+}

package/dist/assets/css/components/feedback/modal/media-queries/x-large.css

@@ -0,0 +1,5 @@
+@media (width <= 1280px) {
+  .ar-modal-wrapper > .ar-modal.large {
+    width: 75%;
+  }
+}

package/dist/assets/css/components/feedback/modal/{modal.css → styles.css}

@@ -43,3 +43,8 @@
 @import url("./header.css");
 @import url("./content.css");
 @import url("./footer.css");
+
+/* Media Queries */
+@import url("./media-queries/x-large.css");
+@import url("./media-queries/medium.css");
+@import url("./media-queries/small.css");

package/dist/assets/css/components/feedback/popover/styles.css

@@ -1,5 +1,6 @@
 .ar-popover-wrapper {
   position: relative;
+  width: max-content;
 }
 
 .ar-popover {

package/dist/assets/css/components/feedback/tooltip/styles.css

@@ -1,3 +1,6 @@
+.ar-tooltip-wrapper {
+  width: max-content;
+}
 .ar-tooltip {
   position: absolute;
   display: flex;

package/dist/assets/css/components/layout/grid-system/row/styles.css

@@ -22,3 +22,9 @@
   max-width: 100%;
   min-height: 1px;
 }
+
+@media (width <= 575px) {
+  .row > .col {
+    min-width: 100%;
+  }
+}

package/dist/assets/css/components/layout/layout.css

@@ -37,3 +37,8 @@
 }
 
 @import url("./header.css");
+
+/* Media Queries */
+/* @import url("./media-queries/x-large.css");
+@import url("./media-queries/medium.css");
+@import url("./media-queries/small.css"); */

package/dist/assets/css/components/layout/media-queries/medium.css

@@ -0,0 +1,21 @@
+@media (width <= 991px) {
+  .ar-layout > header > .ar-header-with-wrap {
+    width: 767px !important;
+  }
+
+  .ar-layout > main {
+    width: 767px !important;
+  }
+
+  .ar-layout > main > aside.ar-aside.left {
+    display: none;
+  }
+  .ar-layout > main > aside.ar-aside.right {
+    display: none;
+  }
+
+  .ar-layout > main > section {
+    min-width: 100% !important;
+    padding-left: 0 !important;
+  }
+}

package/dist/assets/css/components/layout/media-queries/small.css

@@ -0,0 +1,21 @@
+@media (width <= 767px) {
+  .ar-layout > header > .ar-header-with-wrap {
+    width: 95% !important;
+  }
+
+  .ar-layout > main {
+    width: 95% !important;
+  }
+
+  .ar-layout > main > aside.ar-aside.left {
+    display: none;
+  }
+  .ar-layout > main > aside.ar-aside.right {
+    display: none;
+  }
+
+  .ar-layout > main > section {
+    min-width: 100% !important;
+    padding-left: 0 !important;
+  }
+}

package/dist/assets/css/components/layout/media-queries/x-large.css

@@ -0,0 +1,13 @@
+@media (width <= 1280px) {
+  .ar-layout > header > .ar-header-with-wrap {
+    width: 991px !important;
+  }
+
+  .ar-layout > main {
+    width: 991px !important;
+  }
+
+  .ar-layout > main > section {
+    min-width: 791px !important;
+  }
+}

package/dist/components/data-display/table/index.js

@@ -191,7 +191,7 @@ const Table = function ({ children, title, description, data, columns, actions,
                                 }) }, c.title));
                         })),
                     config?.isSearchable && (React.createElement("tr", { key: "isSearchable" },
-                        selections && React.createElement("th", { key: `column-selections` }),
+                        selections && (React.createElement("th", { key: `column-selections`, className: "selection-col sticky-left", "data-sticky-position": "left" })),
                         columns.map((c, cIndex) => {
                             let _className = [];
                             if (c.config?.sticky)

package/dist/components/feedback/modal/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import IProps from "./IProps";
-import "../../../assets/css/components/feedback/modal/modal.css";
+import "../../../assets/css/components/feedback/modal/styles.css";
 declare const Modal: React.FC<IProps>;
 export default Modal;

package/dist/components/feedback/modal/index.js

@@ -1,6 +1,6 @@
 "use client";
 import React, { useEffect, useRef } from "react";
-import "../../../assets/css/components/feedback/modal/modal.css";
+import "../../../assets/css/components/feedback/modal/styles.css";
 import Typography from "../../data-display/typography";
 const { Title } = Typography;
 const Modal = ({ children, open, title, size = "normal", footer }) => {
@@ -28,7 +28,7 @@ const Modal = ({ children, open, title, size = "normal", footer }) => {
             const sx = window.scrollX || document.documentElement.scrollLeft;
             const sy = window.scrollY || document.documentElement.scrollTop;
             if (window.innerHeight > 1024) {
-                arModal.style.top = "100px";
+                arModal.style.top = `${sy + 100}px`;
                 content.removeAttribute("style");
             }
             else if (window.innerHeight > 575 && window.innerHeight < 1024) {
@@ -36,7 +36,7 @@ const Modal = ({ children, open, title, size = "normal", footer }) => {
                 content.removeAttribute("style");
             }
             else if (window.innerHeight < 575) {
-                arModal.style.top = "15px";
+                arModal.style.top = `${sy + 15}px`;
                 content.style.maxHeight = `calc(100vh - ${footer ? "2.5px" : "-30.5px"} - 3.5rem - 4rem - ${footer ? "2rem" : "0rem"})`;
             }
             arModal.style.left = `${screenCenterX - rect.width / 2 + sx}px`;

package/dist/components/layout/LSider.js

@@ -3,8 +3,8 @@ import React from "react";
 import { useLayout } from "../../libs/core/application/hooks";
 const LSider = () => {
     // hooks
-    const { config: options } = useLayout();
-    const sider = options.layout.sider.left;
+    const { config } = useLayout();
+    const sider = config.layout.sider.left;
     if (!sider?.active)
         return null;
     return React.createElement("aside", { className: "ar-aside left" }, sider.element);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.1.84",
+  "version": "0.1.85",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",