ar-design 0.4.31 → 0.4.32

package/dist/assets/css/components/navigation/menu/styles.css

@@ -6,12 +6,14 @@
   > ul {
     display: flex;
     flex-direction: column;
+    gap: 1rem;
     padding: 0;
     margin: 0;
     list-style: none;
 
     li {
       list-style: none;
+      height: 2rem;
 
       > ul.submenu {
         display: grid;
@@ -19,7 +21,10 @@
         margin-left: 1.5rem;
         opacity: 0;
         transform: translateY(-4px);
-        transition: grid-template-rows 250ms ease, opacity 200ms ease, transform 200ms ease;
+        transition:
+          grid-template-rows 250ms ease,
+          opacity 200ms ease,
+          transform 200ms ease;
         overflow: hidden;
 
         > .submenu-inner {
@@ -40,6 +45,8 @@
         display: flex;
         align-items: center;
         gap: 0.5rem;
+        width: 100%;
+        height: inherit;
         padding: 0.3rem;
         white-space: nowrap;
         cursor: pointer;
@@ -85,6 +92,17 @@
           }
         }
 
+        > .item {
+          width: 100%;
+          height: inherit;
+
+          > * {
+            display: flex;
+            align-items: center;
+            height: inherit;
+          }
+        }
+
         > .angel-down {
           position: absolute;
           right: 0.5rem;

package/dist/components/data-display/table/PropertiesPopup.d.ts

@@ -17,11 +17,14 @@ interface IProps<T> {
             currentColumn: TableColumnType<T> | null;
         };
     };
+    methods: {
+        handleScroll: () => void;
+    };
     coordinate: {
         x: number;
         y: number;
     };
 }
-declare function PropertiesPopup<T extends object>({ refs, states, coordinate }: IProps<T>): false | React.ReactPortal;
+declare function PropertiesPopup<T extends object>({ refs, states, methods, coordinate }: IProps<T>): false | React.ReactPortal;
 declare const _default: typeof PropertiesPopup;
 export default _default;

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

@@ -1,21 +1,19 @@
 "use client";
-import React, { memo, useCallback, useEffect, useMemo, useRef, } from "react";
+import React, { memo, useEffect, useMemo, useRef } from "react";
 import ReactDOM from "react-dom";
 import { ARIcon } from "../../icons";
 import { ExtractKey } from "./Helpers";
-function PropertiesPopup({ refs, states, coordinate }) {
+function PropertiesPopup({ refs, states, methods, coordinate }) {
     // refs
     const _arTablePropertiesPopup = useRef(null);
     // methods
-    const handleClickOutSide = useCallback(() => {
-        (event) => {
-            const target = event.target;
-            const clickedInsidePopup = _arTablePropertiesPopup.current && _arTablePropertiesPopup.current.contains(target);
-            const isOneOfButtons = refs.buttons.current.some((button) => button === target || button?.contains(target));
-            if (!clickedInsidePopup && !isOneOfButtons)
-                handleClose();
-        };
-    }, []);
+    const handleClickOutSide = (event) => {
+        const target = event.target;
+        const clickedInsidePopup = _arTablePropertiesPopup.current && _arTablePropertiesPopup.current.contains(target);
+        const isOneOfButtons = target.closest('[data-properties-button="true"]');
+        if (!clickedInsidePopup && !isOneOfButtons)
+            handleClose();
+    };
     const handleSort = useMemo(() => {
         return (columnKey, direction) => {
             if (!columnKey)
@@ -31,10 +29,16 @@ function PropertiesPopup({ refs, states, coordinate }) {
     const handleKeys = (event) => {
         const key = event.key;
         if (key === "Escape")
-            states.open.set(false);
+            handleClose();
+    };
+    const handleOpen = () => {
+        states.open.set(true);
+        methods.handleScroll();
+    };
+    const handleClose = () => {
+        states.open.set(false);
+        methods.handleScroll();
     };
-    const handleOpen = () => states.open.set(true);
-    const handleClose = () => states.open.set(false);
     // useEffects
     useEffect(() => {
         refs.buttons.current.map((button) => {

package/dist/components/data-display/table/THeadCell.d.ts

@@ -1,7 +1,7 @@
 import React, { Dispatch, SetStateAction } from "react";
 import { TableColumnType } from "../../../libs/types";
 import { Config, Sort } from "./IProps";
-declare const MemoizedTHeadCell: <T>({ refs, states, columns, config, }: {
+declare const MemoizedTHeadCell: <T>({ refs, states, methods, columns, config, }: {
     refs: {
         propertiesButton: React.MutableRefObject<(HTMLSpanElement | null)[]>;
     };
@@ -24,6 +24,9 @@ declare const MemoizedTHeadCell: <T>({ refs, states, columns, config, }: {
             }>>;
         };
     };
+    methods: {
+        handleScroll: () => void;
+    };
     columns: TableColumnType<T>[];
     config: Config<T>;
 }) => React.JSX.Element;

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

@@ -2,7 +2,7 @@ import React, { memo } from "react";
 import Button from "../../form/button";
 import { ARIcon } from "../../icons";
 import { ExtractKey } from "./Helpers";
-const MemoizedTHeadCell = function ({ refs, states, columns, config, }) {
+const MemoizedTHeadCell = function ({ refs, states, methods, columns, config, }) {
     return (React.createElement(React.Fragment, null, columns.map((c, cIndex) => {
         const { isProperties = true } = c.config ?? {};
         const _direction = states.sort.get.find((s) => s.key === c.key)?.direction;
@@ -30,7 +30,8 @@ const MemoizedTHeadCell = function ({ refs, states, columns, config, }) {
                         _direction === "asc" && React.createElement(ARIcon, { icon: "ArrowUp" }),
                         _direction === "desc" && React.createElement(ARIcon, { icon: "ArrowDown" }))),
                     c.title),
-                config.isProperties && isProperties && (React.createElement("span", { ref: (element) => (refs.propertiesButton.current[cIndex] = element), className: "properties-field", onClick: (event) => {
+                config.isProperties && isProperties && (React.createElement("span", { ref: (element) => (refs.propertiesButton.current[cIndex] = element), className: "properties-field", "data-properties-button": "true", onClick: (event) => {
+                        event.preventDefault();
                         event.stopPropagation();
                         const rect = event.currentTarget.getBoundingClientRect();
                         const screenCenterX = window.innerWidth / 2;
@@ -49,6 +50,7 @@ const MemoizedTHeadCell = function ({ refs, states, columns, config, }) {
                             return prev;
                         });
                         states.open.set(true);
+                        methods.handleScroll();
                     } },
                     React.createElement(Button, { variant: "borderless", icon: {
                             element: React.createElement(ARIcon, { size: 16, icon: "ThreeDotsVertical", fill: "var(--dark)", strokeWidth: 0 }),

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

@@ -380,6 +380,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             const indexOfFirstRow = indexOfLastRow - selectedPerPage;
             _data = _data.slice(indexOfFirstRow, indexOfLastRow);
         }
+        handleScroll();
         return _data;
     }, [data, searchedText, currentPage, selectedPerPage, sortConfig, config.isServerSide]);
     // useEffects
@@ -559,7 +560,6 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             _tBody.current.ondragover = null;
         };
     }, [data]);
-    useLayoutEffect(() => handleScroll(), [data]);
     useLayoutEffect(() => {
         if (!pagination?.currentPage)
             return;
@@ -603,7 +603,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                                 sort: { get: sortConfig, set: setSortConfig },
                                 sortCurrentColumn: { set: setSortCurrentColumn },
                                 propertiesButtonCoordinate: { set: setPropertiesButtonCoordinate },
-                            }, columns: columns, config: config })),
+                            }, methods: { handleScroll }, columns: columns, config: config })),
                     config?.isSearchable && (React.createElement("tr", { key: "isSearchable" },
                         selections && (React.createElement("th", { key: `column-selections`, className: "selection-col sticky-left", "data-sticky-position": "left" })),
                         columns.map((c, cIndex) => {
@@ -624,9 +624,14 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                                     className: `${_className.map((c) => c).join(" ")}`,
                                 }), ...(c.config?.sticky && {
                                     "data-sticky-position": c.config.sticky,
-                                }) }, c.key && (React.createElement("div", { className: "filter-field" }, c.filterDataType === "date" ? (React.createElement(DatePicker, { value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onChange: (value) => handleSearch(key, value, c.filterDataType), style: { height: "2rem" }, config: { isClock: true, isFooterButton: true, locale: config.locale }, disabled: !c.key || !!c.filters })) : (React.createElement(React.Fragment, null,
-                                React.createElement(Input, { ref: (element) => (_searchTextInputs.current[cIndex] = element), variant: c.key && !c.filters ? "outlined" : "filled", style: { height: "2rem" }, value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onInput: (event) => handleSearch(event.currentTarget.name, event.currentTarget.value), disabled: !c.key || !!c.filters }),
+                                }) }, c.key && (React.createElement("div", { className: "filter-field" }, c.filterDataType === "date" ? (React.createElement(DatePicker, { value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onClick: () => {
+                                    handleScroll();
+                                }, onChange: (value) => handleSearch(key, value, c.filterDataType), style: { height: "2rem" }, config: { isClock: true, isFooterButton: true, locale: config.locale }, disabled: !c.key || !!c.filters })) : (React.createElement(React.Fragment, null,
+                                React.createElement(Input, { ref: (element) => (_searchTextInputs.current[cIndex] = element), variant: c.key && !c.filters ? "outlined" : "filled", style: { height: "2rem" }, value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onClick: () => {
+                                        handleScroll();
+                                    }, onInput: (event) => handleSearch(event.currentTarget.name, event.currentTarget.value), disabled: !c.key || !!c.filters }),
                                 React.createElement("span", { ref: (element) => (_filterButton.current[cIndex] = element), onClick: (event) => {
+                                        event.preventDefault();
                                         event.stopPropagation();
                                         // Temizlik...
                                         setFilterPopupOptionSearchText("");
@@ -648,6 +653,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                                         setFilterCurrentIndex(cIndex);
                                         setOpenFilter(true);
                                         handleFilterPopupContent(c, c.filterDataType ?? dataType, cIndex);
+                                        handleScroll();
                                     } },
                                     React.createElement(Button, { variant: "borderless", icon: {
                                             element: React.createElement(ARIcon, { size: 24, icon: "Filter", fill: "var(--dark)", strokeWidth: 0 }),
@@ -676,7 +682,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             }, states: {
                 open: { get: openProperties, set: setOpenProperties },
                 sort: { get: sortConfig, set: setSortConfig, currentColumn: sortCurrentColumn },
-            }, coordinate: propertiesButtonCoordinate })),
+            }, methods: { handleScroll }, coordinate: propertiesButtonCoordinate })),
         React.createElement("div", { className: "footer" },
             React.createElement("span", null, isMobile ? (React.createElement(React.Fragment, null,
                 React.createElement("strong", null,

package/package.json

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