ar-design 0.1.75 → 0.1.76

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

@@ -19,6 +19,10 @@
   right: 0;
 }
 
+.ar-table > .content > table > thead > tr > th.sticky-left.sticky,
+.ar-table > .content > table > thead > tr > th.sticky-right.sticky {
+  background-color: var(--gray-100);
+}
 .ar-table > .content > table > thead > tr > th.sticky-left.sticky::after,
 .ar-table > .content > table > thead > tr > th.sticky-left.active-sticky::after,
 .ar-table > .content > table > thead > tr > th.sticky-right.sticky::after,
@@ -39,6 +43,7 @@
 }
 .ar-table > .content > table > tbody > tr > td.sticky-left.sticky,
 .ar-table > .content > table > tbody > tr > td.sticky-right.sticky {
+  background-color: var(--gray-100);
   box-shadow: inset -1px 0 0 0 var(--gray-200);
 }
 .ar-table > .content > table > tbody > tr > td.sticky-right.sticky {

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

@@ -14,15 +14,15 @@
   height: 100%;
 }
 .ar-layout > main > aside.ar-aside.left {
-  flex: 2;
+  width: 100%;
   min-height: calc(100vh - 7.5rem);
   border-right: solid 1px var(--gray-200);
 }
 .ar-layout > main > aside.ar-aside.right {
-  flex: 2;
+  width: 100%;
 }
 .ar-layout > main > section {
-  flex: 8;
+  min-width: 1000px;
   height: fit-content;
   border-radius: var(--border-radius-lg);
 }

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

@@ -127,6 +127,9 @@ const Table = function ({ children, title, description, data, columns, actions,
             : _data;
     }, [data, searchedText, currentPage]);
     // useEffects
+    useEffect(() => {
+        handleOnScroll();
+    }, [data]);
     useEffect(() => {
         if (!selections || selectionItems.length === 0)
             return;
@@ -181,9 +184,21 @@ const Table = function ({ children, title, description, data, columns, actions,
                     config?.isSearchable && (React.createElement("tr", { key: "isSearchable" },
                         selections && React.createElement("th", { key: `column-selections` }),
                         columns.map((c, cIndex) => {
-                            if (c.render)
-                                return React.createElement("th", { key: `column-${cIndex}` });
-                            return (React.createElement("th", { key: `column-${cIndex}`, ...(c.config?.sticky && {
+                            let _className = [];
+                            if (c.config?.sticky)
+                                _className.push(`sticky-${c.config.sticky}`);
+                            if (c.config?.alignContent) {
+                                _className.push(`align-content-${c.config.alignContent}`);
+                            }
+                            if (!c.key)
+                                return (React.createElement("th", { key: `column-${cIndex}`, ...(_className.length > 0 && {
+                                        className: `${_className.map((c) => c).join(" ")}`,
+                                    }), ...(c.config?.sticky && {
+                                        "data-sticky-position": c.config.sticky,
+                                    }) }));
+                            return (React.createElement("th", { key: `column-${cIndex}`, ...(_className.length > 0 && {
+                                    className: `${_className.map((c) => c).join(" ")}`,
+                                }), ...(c.config?.sticky && {
                                     "data-sticky-position": c.config.sticky,
                                 }) },
                                 React.createElement("input", { className: "search-input", onChange: (event) => setSearchedText((prev) => {
@@ -234,7 +249,7 @@ const Table = function ({ children, title, description, data, columns, actions,
                         if (c.config?.textWrap)
                             _className.push(`text-${c.config.textWrap}`);
                         return (React.createElement("td", { key: `cell-${index}-${cIndex}`, ...(c.config?.width && {
-                                style: { width: c.config.width },
+                                style: { minWidth: c.config.width },
                             }), ...(_className.length > 0 && {
                                 className: `${_className.map((c) => c).join(" ")}`,
                             }), ...(c.config?.sticky && {

package/dist/components/form/select/index.js

@@ -23,7 +23,7 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
     const [searchText, setSearchText] = useState("");
     const [singleInputText, setSingleInputText] = useState("");
     const [navigationIndex, setNavigationIndex] = useState(0);
-    _selectionClassName.push(...Utils.GetClassName(variant, validation ? "danger" : "light", border, undefined, undefined, undefined));
+    _selectionClassName.push(...Utils.GetClassName(variant, validation?.text ? "danger" : "light", border, undefined, undefined, undefined));
     // methods
     const handleClickOutSide = (event) => {
         const target = event.target;
@@ -77,6 +77,7 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
                     ? InpuRect.top - optionRect.height - (multiple ? 20 : 0)
                     : InpuRect.top + InpuRect.height) + sy}px`;
                 _options.current.style.left = `${InpuRect.left + sx}px`;
+                _options.current.style.minWidth = "200px";
                 _options.current.style.width = `${InpuRect.width}px`;
             }
         }

package/package.json

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