ar-design 0.2.56 → 0.2.58

package/dist/assets/css/components/data-display/chip/chip.css

@@ -9,6 +9,6 @@
   font-weight: 600;
   white-space: nowrap;
   user-select: none;
-  -webkit-text-stroke: 0.5px var(--white);
+  /* -webkit-text-stroke: 0.5px var(--white); */
   letter-spacing: 1px;
 }

package/dist/assets/css/components/data-display/table/filter-popup.css

@@ -0,0 +1,11 @@
+.ar-table-filter-popup {
+  position: absolute;
+  background-color: var(--white);
+  width: 225px;
+  max-height: 300px;
+  padding: 1rem;
+  border-radius: var(--border-radius-sm);
+  box-shadow: 0px 10px 15px -5px rgba(var(--black-rgb), 0.1);
+  transition: top 350ms, left 1s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+  z-index: 5;
+}

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

@@ -20,7 +20,9 @@
 }
 
 .ar-table > .content > table > thead > tr > th.sticky-left.sticky,
-.ar-table > .content > table > thead > tr > th.sticky-right.sticky {
+.ar-table > .content > table > thead > tr > th.sticky-right.sticky,
+.ar-table > .content > table > thead > tr > th.sticky-left.active-sticky,
+.ar-table > .content > table > thead > tr > th.sticky-right.active-sticky {
   background-color: var(--gray-100);
 }
 .ar-table > .content > table > thead > tr > th.sticky-left.sticky::after,
@@ -42,7 +44,9 @@
   right: auto;
 }
 .ar-table > .content > table > tbody > tr > td.sticky-left.sticky,
-.ar-table > .content > table > tbody > tr > td.sticky-right.sticky {
+.ar-table > .content > table > tbody > tr > td.sticky-right.sticky,
+.ar-table > .content > table > tbody > tr > td.sticky-left.active-sticky,
+.ar-table > .content > table > tbody > tr > td.sticky-right.active-sticky {
   background-color: var(--gray-100);
   box-shadow: inset -1px 0 0 0 var(--gray-200);
 }

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

@@ -25,7 +25,7 @@
 }
 .ar-table > .header > .title > h3 {
   color: var(--gray-700);
-  -webkit-text-stroke: 0.25px var(--gray-700);
+  /* -webkit-text-stroke: 0.25px var(--gray-700); */
 }
 .ar-table > .header > .title > h5 {
   color: var(--gray-600);
@@ -83,11 +83,12 @@
 .ar-table > .content > table > thead > tr > th {
   position: relative;
   color: var(--gray-700);
-  -webkit-text-stroke: 0.25px var(--gray-700);
+  /* -webkit-text-stroke: 0.25px var(--gray-700); */
   text-align: left;
   text-wrap: nowrap;
   z-index: 2;
 }
+
 .ar-table > .content > table > thead > tr > th > .filter-field {
   display: flex;
   flex-direction: row;
@@ -96,6 +97,7 @@
   gap: 0.5rem;
   min-width: 100%;
 }
+
 .ar-table > .content > table > thead > tr > th::after {
   position: absolute;
   top: 50%;
@@ -185,17 +187,43 @@
 }
 
 .ar-table > .content > table > tbody > tr.subrow-item {
-  background-color: rgba(var(--warning-rgb), 0.1);
-  border-bottom: solid 1px rgba(var(--warning-rgb), 0.35);
+  /* background-color: rgba(var(--warning-rgb), 0.1); */
+  /* border-bottom: solid 1px rgba(var(--warning-rgb), 0.35); */
 }
 .ar-table > .content > table > tbody > tr.subrow-item:last-child {
-  background-color: rgba(var(--warning-rgb), 0.1);
-  border-bottom: none;
+  /* background-color: rgba(var(--warning-rgb), 0.1); */
+  /* border-bottom: none; */
+}
+.ar-table > .content > table > tbody > tr.subrow-item > td > .table-cell {
+  /* position: relative; */
+}
+.ar-table > .content > table > tbody > tr.subrow-item > td > .table-cell > .before {
+  position: absolute;
+  top: 0px;
+  content: "";
+  background-color: var(--gray-600);
+  width: 2px;
+  height: 100%;
+  margin-left: -17.5px;
+}
+.ar-table > .content > table > tbody > tr.subrow-item:last-child > td > .table-cell > .before {
+  height: 50%;
 }
-.ar-table > .content > table > tbody > tr.subrow-item.type-a > td:nth-child(1)::before {
+.ar-table > .content > table > tbody > tr.subrow-item > td > .table-cell > .after {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  content: "";
+  background-color: var(--gray-600);
+  width: 15px;
+  height: 2px;
+  margin-left: -17.5px;
+}
+
+/* .ar-table > .content > table > tbody > tr.subrow-item.type-a > td:nth-child(1)::before {
   position: absolute;
   top: 0;
-  left: 0;
+  left: 1rem;
   content: "";
   background-color: rgba(var(--warning-rgb), 0.35);
   width: 2px;
@@ -209,9 +237,9 @@
   background-color: rgba(var(--warning-rgb), 0.35);
   width: 25px;
   height: 2px;
-}
+} */
 
-.ar-table > .content > table > tbody > tr.subrow-item.type-b > td:nth-child(2)::before {
+/* .ar-table > .content > table > tbody > tr.subrow-item.type-b > td:nth-child(2)::before {
   position: absolute;
   top: 0;
   left: 0;
@@ -228,6 +256,7 @@
   background-color: rgba(var(--warning-rgb), 0.35);
   width: 25px;
   height: 2px;
-}
+} */
 
 @import url("./scroll.css");
+@import url("./filter-popup.css");

package/dist/assets/css/components/data-display/typography/title/core.css

@@ -1,5 +1,5 @@
 .ar-typography-title {
   color: var(--gray-700);
   font-family: var(--system);
-  -webkit-text-stroke: 0.5px var(--gray-700);
+  /* -webkit-text-stroke: 0.5px var(--gray-700); */
 }

package/dist/assets/css/components/feedback/progress/progress.css

@@ -33,7 +33,7 @@
   color: var(--white);
   font-size: 0.75rem;
   line-height: 1rem;
-  -webkit-text-stroke: 0.75px var(--white);
+  /* -webkit-text-stroke: 0.75px var(--white); */
   z-index: 1;
 }
 .ar-progress > .ar-progress-value > span::before {

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

@@ -24,11 +24,11 @@
   color: var(--gray-700);
   font-size: 0.85rem;
   text-wrap: nowrap;
-  -webkit-text-stroke: 0.75px var(--gray-700);
+  /* -webkit-text-stroke: 0.75px var(--gray-700); */
 }
 .ar-tooltip > .text > .bullet {
   color: var(--gray-400);
-  -webkit-text-stroke: 0px;
+  /* -webkit-text-stroke: 0px; */
 }
 
 .ar-tooltip::before {

package/dist/assets/css/components/form/date-picker/calendar/header.css

@@ -25,7 +25,7 @@
   height: var(--input-height);
 }
 .ar-date-calendar > .header > .select-field > .selects > div > span {
-  -webkit-text-stroke: 1px var(--black);
+  /* -webkit-text-stroke: 1px var(--black); */
   user-select: none;
 }
 

package/dist/assets/css/components/form/date-picker/clock/header.css

@@ -4,5 +4,5 @@
   align-items: center;
   border-bottom: solid 1px var(--gray-200);
   text-align: center;
-  -webkit-text-stroke: 1px var(--black);
+  /* -webkit-text-stroke: 1px var(--black); */
 }

package/dist/assets/css/components/form/select/styles.css

@@ -88,7 +88,7 @@
 .ar-select-wrapper > .ar-select > .selections > .items > span.placeholder {
   color: var(--dark);
   font-family: var(--system);
-  -webkit-text-stroke: 0.25px var(--dark);
+  /* -webkit-text-stroke: 0.25px var(--dark); */
 }
 .ar-select-wrapper > .ar-select > .selections > ul {
   display: flex;

package/dist/assets/css/components/form/upload/animations.css

@@ -5,7 +5,7 @@
   50% {
     box-shadow: 0 0 0 2.5px rgba(var(--warning-rgb), 0.25);
     color: var(--warning);
-    -webkit-text-stroke: 1px var(--warning);
+    /* -webkit-text-stroke: 1px var(--warning); */
     transform: scale(1.25);
   }
   100% {

package/dist/assets/css/components/form/upload/styles.css

@@ -54,7 +54,7 @@
 }
 .ar-upload-button > .ar-upload-files > ul > li .content > span:first-child.error {
   color: var(--danger);
-  -webkit-text-stroke: 0.5px var(--danger);
+  /* -webkit-text-stroke: 0.5px var(--danger); */
 }
 .ar-upload-button > .ar-upload-files > ul > li .content > span:last-child {
   background-color: rgba(var(--danger-rgb), 0.1);
@@ -64,7 +64,7 @@
   color: rgba(var(--danger-rgb), 0.5);
   font-size: 0.75rem;
   text-align: center;
-  -webkit-text-stroke: 1px rgba(var(--danger-rgb), 0.5);
+  /* -webkit-text-stroke: 1px rgba(var(--danger-rgb), 0.5); */
   line-height: 0.85rem;
   cursor: pointer;
 }

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

@@ -13,7 +13,7 @@
   list-style: none;
 }
 .ar-menu > ul li {
-  -webkit-text-stroke: 0.5px var(--black);
+  /* -webkit-text-stroke: 0.5px var(--black); */
 }
 
 .ar-menu > ul li .item-render {

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

@@ -0,0 +1,12 @@
+import React, { MutableRefObject, ReactNode } from "react";
+interface IProps {
+    children: ReactNode;
+    tableContent: MutableRefObject<HTMLDivElement | null>;
+    coordinate: {
+        x: number;
+        y: number;
+    };
+    buttons: MutableRefObject<(HTMLSpanElement | null)[]>;
+}
+declare const FilterPopup: ({ children, tableContent, coordinate, buttons }: IProps) => false | React.ReactPortal;
+export default FilterPopup;

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

@@ -0,0 +1,59 @@
+import React, { useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+const FilterPopup = ({ children, tableContent, coordinate, buttons }) => {
+    // refs
+    const _arTableFilterPopup = useRef(null);
+    // states
+    const [open, setOpen] = useState(false);
+    // methods
+    const handleClickOutSide = (event) => {
+        const target = event.target;
+        const clickedInsidePopup = _arTableFilterPopup.current && _arTableFilterPopup.current.contains(target);
+        const isOneOfButtons = buttons.current.some((button) => button === target || button?.contains(target));
+        if (!clickedInsidePopup && !isOneOfButtons)
+            setOpen(false);
+    };
+    const handleKeys = (event) => {
+        const key = event.key;
+        if (key === "Escape")
+            setOpen(false);
+    };
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+    // useEffects
+    useEffect(() => {
+        buttons.current.map((button) => {
+            if (button)
+                button.addEventListener("click", handleOpen);
+        });
+        return () => {
+            buttons.current.map((button) => {
+                if (button)
+                    button.removeEventListener("click", handleOpen);
+            });
+        };
+    }, [buttons]);
+    useEffect(() => {
+        const firstFilterButton = buttons.current[0];
+        if (firstFilterButton) {
+            const rect = firstFilterButton.getBoundingClientRect();
+            coordinate.x = rect.left;
+            coordinate.y = rect.top + rect.height;
+        }
+        if (tableContent.current) {
+            tableContent.current.addEventListener("scroll", handleClose);
+        }
+        document.addEventListener("click", handleClickOutSide);
+        document.addEventListener("keydown", handleKeys);
+        return () => {
+            document.removeEventListener("click", handleClickOutSide);
+            document.removeEventListener("keydown", handleKeys);
+            if (tableContent.current) {
+                tableContent.current.removeEventListener("scroll", handleClose);
+            }
+        };
+    }, []);
+    return (open &&
+        ReactDOM.createPortal(React.createElement("div", { ref: _arTableFilterPopup, className: "ar-table-filter-popup", style: { top: coordinate.y, left: coordinate.x } }, children), document.body));
+};
+export default FilterPopup;

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

@@ -1,8 +1,26 @@
 import React from "react";
 import { AllowedTypes, TableColumnType } from "../../../libs/types";
 import { IChildren } from "../../../libs/types/IGlobalProps";
+import { FilterOperator } from "../../../libs/infrastructure/shared/Enums";
+export type Operator = "Contains" | "DoesNotContains" | "Equals" | "DoesNotEquals" | "BeginsWith" | "EndsWith" | "Blank" | "NotBlank";
+export type FilterValue = {
+    value: string | number | boolean;
+    operator: FilterOperator;
+};
 export type SearchedParam = {
-    [key: string]: string;
+    [key: string]: FilterValue | FilterValue[];
+};
+export type Config = {
+    isServerSide?: boolean;
+    isSearchable?: boolean;
+    scroll?: {
+        maxHeight: number;
+    };
+    subrow?: {
+        openAutomatically?: boolean;
+        selector?: string;
+        button?: boolean;
+    };
 };
 type ImportActionType = {
     tooltip: string;
@@ -26,23 +44,12 @@ interface IProps<T> extends IChildren {
     };
     selections?: (selectionItems: T[]) => void;
     previousSelections?: T[];
-    searchedParams?: (params: SearchedParam | undefined, query: string) => void;
+    searchedParams?: (params: SearchedParam | null, query: string, operator: FilterOperator) => void;
     pagination?: {
         totalRecords: number;
         perPage: number;
         onChange?: (currentPage: number) => void;
     };
-    config?: {
-        isServerSide?: boolean;
-        isSearchable?: boolean;
-        scroll?: {
-            maxHeight: number;
-        };
-        subrow?: {
-            openAutomatically?: boolean;
-            selector?: string;
-            button?: boolean;
-        };
-    };
+    config?: Config;
 }
 export default IProps;

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { TableColumnType } from "../../../libs/types";
+declare const MemoizedTHeadCell: <T>({ columns }: {
+    columns: TableColumnType<T>[];
+}) => React.JSX.Element;
+declare const THeadCell: typeof MemoizedTHeadCell;
+export default THeadCell;

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

@@ -0,0 +1,27 @@
+import React from "react";
+const MemoizedTHeadCell = function ({ columns }) {
+    return (React.createElement(React.Fragment, null, columns.map((c, cIndex) => {
+        let _className = [];
+        if (c.config?.sticky)
+            _className.push(`sticky-${c.config.sticky}`);
+        if (!c.config?.width)
+            _className.push("min-w");
+        if (c.config?.alignContent) {
+            _className.push(`align-content-${c.config.alignContent}`);
+        }
+        return (React.createElement("th", { key: `column-${cIndex}-${Math.random()}`, ...(_className.length > 0 && {
+                className: `${_className.map((c) => c).join(" ")}`,
+            }), ...(c.config?.width
+                ? {
+                    style: { minWidth: c.config.width, maxWidth: c.config.width },
+                }
+                : // : { style: { maxWidth: thWidths[cIndex], minWidth: thWidths[cIndex] } })}
+                    { style: {} }), ...(c.config?.sticky && {
+                "data-sticky-position": c.config.sticky,
+            }) },
+            React.createElement("span", { style: { fontWeight: 500 } }, c.title)));
+    })));
+};
+// 👇 React.memo kullanımı sırasında generic tipi koruyoruz
+const THeadCell = React.memo(MemoizedTHeadCell);
+export default THeadCell;

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

@@ -4,11 +4,27 @@ import { ARIcon } from "../../icons";
 import Button from "../../form/button";
 import Checkbox from "../../form/checkbox";
 import Pagination from "../../navigation/pagination";
-import React, { forwardRef, Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { forwardRef, Fragment, memo, useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import Input from "../../form/input";
 import Popover from "../../feedback/popover";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import Upload from "../../form/upload";
+import FilterPopup from "./FilterPopup";
+import { FilterOperator } from "../../../libs/infrastructure/shared/Enums";
+import Select from "../../form/select";
+import Grid from "../grid-system";
+import THeadCell from "./THeadCell";
+const filterOption = [
+    { value: FilterOperator.Contains, text: "İçerir" },
+    { value: FilterOperator.DoesNotContains, text: "İçermez" },
+    { value: FilterOperator.Equals, text: "Eşittir" },
+    { value: FilterOperator.DoesNotEquals, text: "Eşit değildir" },
+    { value: FilterOperator.BeginsWith, text: "İle başlar" },
+    { value: FilterOperator.EndsWith, text: "İle biter" },
+    { value: FilterOperator.Blank, text: "Boş" },
+    { value: FilterOperator.NotBlank, text: "Boş değil" },
+];
+const { Row, Column } = Grid;
 const Table = forwardRef(({ children, title, description, data, columns, actions, selections, previousSelections, searchedParams, pagination, config = { isSearchable: false }, }, ref) => {
     // refs
     const _tableWrapper = useRef(null);
@@ -18,6 +34,8 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
     // refs -> Search
     const _searchTextInputs = useRef([]);
     const _searchTimeOut = useRef(null);
+    // refs -> Filter
+    const _filterButton = useRef([]);
     // variables
     const _subrowOpenAutomatically = config.subrow?.openAutomatically ?? false;
     const _subrowSelector = config.subrow?.selector ?? "subitems";
@@ -32,9 +50,18 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
     const [files, setFiles] = useState([]);
     const [formData, setFormData] = useState(undefined);
     // states -> Search
-    const [searchedText, setSearchedText] = useState(undefined);
-    const [_searchedParams, setSearchedParams] = useState(undefined);
-    const [checkboxSelectedParams, setCheckboxSelectedParams] = useState(undefined);
+    const [searchedText, setSearchedText] = useState(null);
+    const [_searchedParams, setSearchedParams] = useState(null);
+    const [checkboxSelectedParams, setCheckboxSelectedParams] = useState(null);
+    // states -> Filter
+    const [filterButtonCoordinate, setFilterButtonCoordinate] = useState({ x: 0, y: 0 });
+    const [filterPopupContent, setFilterPopupContent] = useState(null);
+    const [filterPopupOption, setFilterPopupOption] = useState(null);
+    const [filterPopupOptionSearchText, setFilterPopupOptionSearchText] = useState(null);
+    // states -> Filter Fields Backup
+    const [filterCurrentColumn, setFilterCurrentColumn] = useState(null);
+    const [filterCurrentDataType, setFilterCurrentDataType] = useState(null);
+    const [filterCurrentIndex, setFilterCurrentIndex] = useState(null);
     // states -> Pagination
     const [totalRecords, setTotalRecords] = useState(0);
     const [currentPage, setCurrentPage] = useState(1);
@@ -46,7 +73,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
         }
     }
     // methods
-    const handleScroll = () => {
+    const handleScroll = useCallback(() => {
         if (!_tableWrapper.current)
             return;
         const wrapperRect = _tableWrapper.current.getBoundingClientRect();
@@ -80,7 +107,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                     else
                         child.classList.add("sticky");
                     if (child.nodeName === "TD")
-                        child.style.zIndex = `${leftChildren.length - index}`;
+                        child.style.zIndex = `5`;
                 });
                 // #endregion
                 // #region Right
@@ -108,13 +135,20 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
             updateStickyPositions(theadElements);
             updateStickyPositions(tbodyElements);
         });
-    };
-    const handleSearch = (event) => {
+    }, []);
+    const handleSearch = useCallback((event) => {
+        const { name, value } = event.target;
+        const operator = filterPopupOption?.key == name
+            ? filterPopupOption.option?.value
+            : FilterOperator.Contains;
         if (config.isServerSide) {
             if (_searchTimeOut.current)
                 clearTimeout(_searchTimeOut.current);
             _searchTimeOut.current = setTimeout(() => {
-                setSearchedParams((prev) => ({ ...prev, [event.target.name]: event.target.value }));
+                setSearchedParams((prev) => ({
+                    ...prev,
+                    [name]: { value: value, operator: operator },
+                }));
                 if (pagination && pagination.onChange)
                     pagination.onChange(1);
             }, 750);
@@ -122,66 +156,157 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
         else {
             setSearchedText((prev) => {
                 const _state = { ...prev };
-                if (event.target.value === "") {
-                    delete _state[event.target.name]; // Key'i siliyoruz
+                if (value === "") {
+                    delete _state[name]; // Key'i siliyoruz
                 }
                 else {
-                    _state[event.target.name] = event.target.value; // Yeni değeri ekliyoruz
+                    _state[name] = { value: value, operator: operator }; // Yeni değeri ekliyoruz
                 }
                 return _state;
             });
         }
+        event.target.value = value;
         setCurrentPage(1);
-    };
+    }, [filterPopupOption]);
     const handleCheckboxChange = useCallback(async (event) => {
         event.stopPropagation();
+        const { name, value, checked } = event.target;
         setCheckboxSelectedParams((prev) => {
-            const updatedValues = new Set(prev?.[event.target.name] || []);
-            event.target.checked ? updatedValues.add(event.target.value) : updatedValues.delete(event.target.value);
+            const prevFilters = prev?.[name] || [];
+            const updatedSet = new Set(prevFilters.map((f) => String(f.value)));
+            checked ? updatedSet.add(value) : updatedSet.delete(value);
+            const updatedArray = Array.from(updatedSet).map((v) => ({
+                value: v,
+                operator: FilterOperator.Equals, // Checkbox’lar genelde “Equals” anlamındadır.
+            }));
             return {
                 ...prev,
-                ...(Array.from(updatedValues).length > 0
-                    ? { [event.target.name]: Array.from(updatedValues) }
-                    : { [event.target.name]: [] }),
+                ...(updatedArray.length > 0 ? { [name]: updatedArray } : { [name]: [] }),
             };
         });
     }, []);
+    const handleFilterPopupContent = (c, dataType, index) => {
+        const key = typeof c.key !== "object" ? String(c.key) : String(c.key.field);
+        const value = Array.isArray(searchedText?.[key])
+            ? "" // veya ihtiyacına göre birleştirme yap: searchedText[key].map(v => v.value).join(", ").
+            : searchedText?.[key]?.value;
+        const handleChange = (event) => {
+            const { value } = event.target;
+            const input = _searchTextInputs.current[index ?? 0];
+            if (input) {
+                const event = new Event("input", { bubbles: true });
+                input.value = value;
+                input.dispatchEvent(event);
+            }
+        };
+        setFilterPopupContent(() => {
+            switch (dataType) {
+                case "string":
+                case "number":
+                    return (React.createElement(Row, null,
+                        React.createElement(Column, { size: 12 },
+                            React.createElement(Select, { value: filterOption.find((x) => x.value === filterPopupOption?.option?.value && filterPopupOption.key === c.key) ?? filterOption[0], options: filterOption, onChange: (option) => {
+                                    setFilterPopupOption({ key: c.key, option: option });
+                                }, placeholder: "Ko\u015Ful" })),
+                        React.createElement(Column, { size: 12 },
+                            React.createElement(Input, { value: value ?? "", onChange: handleChange, placeholder: "Ara" }))));
+                case "object":
+                case "boolean":
+                    return (React.createElement(Row, null,
+                        React.createElement(Column, { size: 12 },
+                            React.createElement(Input, { placeholder: "Ara", value: value ?? "", onChange: (event) => setFilterPopupOptionSearchText(event.target.value) })),
+                        React.createElement(Column, { size: 12 }, c.filters
+                            ?.filter((filter) => filter.text.toLocaleLowerCase().includes(filterPopupOptionSearchText?.toLocaleLowerCase() ?? ""))
+                            ?.map((filter, fIndex) => {
+                            const name = typeof c.key !== "object" ? String(c.key) : String(c.key.field);
+                            return (React.createElement("div", null,
+                                React.createElement(Checkbox, { ref: (element) => (_filterCheckboxItems.current[fIndex] = element), label: filter.text, name: name, status: "primary", value: filter.value, checked: Array.isArray(checkboxSelectedParams?.[name]) &&
+                                        checkboxSelectedParams?.[name]?.some((f) => String(f.value) === String(filter.value)), onChange: async (event) => await handleCheckboxChange(event) })));
+                        }))));
+                default:
+                    return React.createElement(React.Fragment, null);
+            }
+        });
+    };
     // Derinlemesine arama yapmak için özyinelemeli bir fonksiyon olarak kullanılmaktadır.
     const deepSearch = (item, searchedText) => {
         if (!searchedText || Object.keys(searchedText).length === 0)
             return true;
-        // Eğer değer bir sayı veya string ise, aranan metinle eşleşip eşleşmediğini kontrol ediyoruz.
-        return Object.entries(searchedText).every(([key, value]) => {
-            const _itemValue = item[key];
-            if (typeof _itemValue === "number" || typeof _itemValue === "string" || typeof _itemValue === "boolean") {
-                if (Array.isArray(value)) {
-                    if (value.length === 0)
-                        return true;
-                    else
-                        return value.some((v) => _itemValue.toString().toLocaleLowerCase().includes(v.toLocaleLowerCase()));
-                }
-                return _itemValue.toString().toLocaleLowerCase().includes(value.toLocaleLowerCase());
+        const applyOperator = (value, filter) => {
+            if (Array.isArray(value)) {
+                // Array içindeki herhangi bir öğe eşleşirse true dön
+                return value.some((item) => applyOperator(item, filter));
             }
-            if (typeof _itemValue === "object") {
-                if (Array.isArray(value)) {
-                    if (value.length === 0)
-                        return true;
-                    else {
-                        return value.some((v) => {
-                            if (Array.isArray(_itemValue)) {
-                                return Object.values(_itemValue?.[0] ?? {}).some((objValue) => {
-                                    return String(objValue).toLocaleLowerCase().includes(String(v).toLocaleLowerCase());
-                                });
-                            }
-                        });
-                    }
-                }
+            if (typeof value === "object" && value !== null) {
+                // Eğer obje ise, içindeki değerlerden biri eşleşirse true dön
+                return Object.values(value).some((v) => applyOperator(v, filter));
+            }
+            const text = String(value ?? "").toLocaleLowerCase();
+            const searchText = String(filter.value ?? "").toLocaleLowerCase();
+            switch (filter.operator) {
+                case FilterOperator.Contains:
+                    return text.includes(searchText);
+                case FilterOperator.DoesNotContains:
+                    return !text.includes(searchText);
+                case FilterOperator.Equals:
+                    return text === searchText;
+                case FilterOperator.DoesNotEquals:
+                    return text !== searchText;
+                case FilterOperator.BeginsWith:
+                    return text.startsWith(searchText);
+                case FilterOperator.EndsWith:
+                    return text.endsWith(searchText);
+                case FilterOperator.Blank:
+                    return text.trim() === "";
+                case FilterOperator.NotBlank:
+                    return text.trim() !== "";
+                default:
+                    return false;
+            }
+        };
+        return Object.entries(searchedText).every(([key, param]) => {
+            const _itemValue = item[key];
+            if (Array.isArray(param)) {
+                if (param.length === 0)
+                    return true;
+                return param.some((filter) => applyOperator(_itemValue, filter));
             }
-            if (Array.isArray(_itemValue)) {
-                console.log("Buradasın", _itemValue);
+            else {
+                return applyOperator(_itemValue, param);
             }
-            return false;
         });
+        // Eğer değer bir sayı veya string ise, aranan metinle eşleşip eşleşmediğini kontrol ediyoruz.
+        // return Object.entries(searchedText).every(([key, param]) => {
+        //   const _itemValue = item[key as keyof typeof item];
+        //   if (typeof _itemValue === "number" || typeof _itemValue === "string" || typeof _itemValue === "boolean") {
+        //     if (Array.isArray(param)) {
+        //       if (param.length === 0) return true;
+        //       else return param.some((v) => _itemValue.toString().toLocaleLowerCase().includes(v.toLocaleLowerCase()));
+        //     }
+        //     return _itemValue
+        //       .toString()
+        //       .toLocaleLowerCase()
+        //       .includes(param.toLocaleLowerCase() ?? "");
+        //   }
+        //   if (typeof _itemValue === "object") {
+        //     if (Array.isArray(param)) {
+        //       if (param.length === 0) return true;
+        //       else {
+        //         return param.some((v) => {
+        //           if (Array.isArray(_itemValue)) {
+        //             return Object.values(_itemValue?.[0 as keyof typeof _itemValue] ?? {}).some((objValue) => {
+        //               return String(objValue).toLocaleLowerCase().includes(String(v).toLocaleLowerCase());
+        //             });
+        //           }
+        //         });
+        //       }
+        //     }
+        //   }
+        //   if (Array.isArray(_itemValue)) {
+        //     console.log("Buradasın", _itemValue);
+        //   }
+        //   return false;
+        // });
     };
     const openAllSubrowsRecursively = (data, parentKey = "") => {
         let result = {};
@@ -263,7 +388,10 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
         if (c.config?.textWrap)
             _className.push(`text-${c.config.textWrap}`);
         return (React.createElement("td", { key: `cell-${index}-${cIndex}`, className: _className.join(" "), style: c.config?.width ? { minWidth: c.config.width, maxWidth: c.config.width } : {}, "data-sticky-position": c.config?.sticky },
-            React.createElement("div", { style: { paddingLeft: `${depth == 0 ? 1 : depth}rem` }, className: "table-cell" }, React.isValidElement(render) ? render : String(render))));
+            React.createElement("div", { style: { paddingLeft: `${depth == 0 ? 1 : depth}rem` }, className: "table-cell" },
+                cIndex === 0 && React.createElement("div", { className: "before" }),
+                React.isValidElement(render) ? render : String(render),
+                cIndex === 0 && React.createElement("div", { className: "after" }))));
     };
     const SubitemList = ({ items, columns, index, depth }) => {
         return items.map((subitem, subindex) => {
@@ -282,7 +410,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                                         [`${index}.${subindex}`]: !prev[`${index}.${subindex}`],
                                     }));
                                 } })))) : isHasSubitems && _subrowButton ? (React.createElement("td", { style: { width: 0, minWidth: 0 } })) : null,
-                    columns.map((c, cIndex) => renderCell(subitem, c, cIndex, subindex, depth * 1.5))),
+                    columns.map((c, cIndex) => renderCell(subitem, c, cIndex, subindex, depth * 1.75))),
                 showSubitems[`${index}.${subindex}`] && _subitem && (React.createElement(SubitemList, { key: `subitem-${index}-${subindex}-${Math.random()}`, items: _subitem, columns: columns, index: subindex, depth: depth * 1.5 }))));
         });
     };
@@ -297,21 +425,37 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
     }, [previousSelections]);
     useEffect(() => {
         if (config?.isServerSide && searchedParams) {
-            const query = new URLSearchParams(_searchedParams);
+            const searchRecord = {};
+            Object.entries(_searchedParams ?? {}).forEach(([key, value]) => {
+                if (Array.isArray(value)) {
+                    // Çoklu filtre değerleri varsa virgülle birleştir.
+                    searchRecord[key] = value.map((v) => v.value).join(",");
+                }
+                else if (value && typeof value === "object") {
+                    searchRecord[key] = String(value.value);
+                }
+            });
+            const query = new URLSearchParams(searchRecord);
             columns.forEach((column) => {
-                const getParamsLength = column.filters?.length;
-                const searchedParamLength = Array.from(_searchedParams?.[column.key] ?? []).length;
-                if (getParamsLength === searchedParamLength)
+                const key = column.key;
+                const filterValue = _searchedParams?.[key];
+                const filterArray = Array.isArray(filterValue) ? filterValue : filterValue ? [filterValue] : [];
+                const getParamsLength = column.filters?.length ?? 0;
+                const searchedParamLength = filterArray.length;
+                if (getParamsLength === searchedParamLength) {
                     query.delete(column.key);
+                }
             });
-            searchedParams(_searchedParams, query.toString());
+            searchedParams(_searchedParams, query.toString(), filterPopupOption?.option?.value);
         }
     }, [_searchedParams]);
     useEffect(() => {
+        if (!checkboxSelectedParams)
+            return;
         if (config.isServerSide) {
             if (_searchTimeOut.current)
                 clearTimeout(_searchTimeOut.current);
-            setSearchedParams(checkboxSelectedParams);
+            setSearchedParams((prev) => ({ ...prev, ...checkboxSelectedParams }));
         }
         else {
             setSearchedText((prev) => ({ ...prev, ...checkboxSelectedParams }));
@@ -332,6 +476,12 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
             setSelectAll(_checkboxItems.current.every((item) => item?.checked === true));
         }
     }, [selectionItems, currentPage]);
+    useEffect(() => {
+        // Filter Content alanı re-render işlemi.
+        if (filterCurrentColumn && filterCurrentDataType) {
+            handleFilterPopupContent(filterCurrentColumn, filterCurrentDataType, filterCurrentIndex);
+        }
+    }, [checkboxSelectedParams, filterPopupOption, filterPopupOptionSearchText]);
     return (React.createElement("div", { ref: _tableWrapper, className: _tableClassName.map((c) => c).join(" ") },
         (title || description || actions || React.Children.count(children) > 0) && (React.createElement("div", { className: "header" },
             React.createElement("div", { className: "title" },
@@ -371,30 +521,18 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                                         });
                                     }
                                 } }))),
-                        columns.map((c, cIndex) => {
-                            let _className = [];
-                            if (c.config?.sticky)
-                                _className.push(`sticky-${c.config.sticky}`);
-                            if (!c.config?.width)
-                                _className.push("min-w");
-                            if (c.config?.alignContent) {
-                                _className.push(`align-content-${c.config.alignContent}`);
-                            }
-                            return (React.createElement("th", { key: `column-${cIndex}-${Math.random()}`, ...(_className.length > 0 && {
-                                    className: `${_className.map((c) => c).join(" ")}`,
-                                }), ...(c.config?.width
-                                    ? {
-                                        style: { minWidth: c.config.width, maxWidth: c.config.width },
-                                    }
-                                    : // : { style: { maxWidth: thWidths[cIndex], minWidth: thWidths[cIndex] } })}
-                                        { style: {} }), ...(c.config?.sticky && {
-                                    "data-sticky-position": c.config.sticky,
-                                }) }, c.title));
-                        })),
+                        React.createElement(THeadCell, { columns: columns })),
                     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) => {
                             let _className = [];
+                            const key = typeof c.key !== "object" ? String(c.key) : String(c.key.field);
+                            const csrValue = Array.isArray(searchedText?.[key])
+                                ? "" // veya ihtiyacına göre birleştirme yap: searchedText[key].map(v => v.value).join(", ").
+                                : searchedText?.[key]?.value;
+                            const ssrValue = Array.isArray(_searchedParams?.[key])
+                                ? "" // veya ihtiyacına göre birleştirme yap: _searchedParams[key].map(v => v.value).join(", ").
+                                : _searchedParams?.[key]?.value;
                             if (c.config?.sticky)
                                 _className.push(`sticky-${c.config.sticky}`);
                             if (c.config?.alignContent) {
@@ -405,15 +543,35 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                                 }), ...(c.config?.sticky && {
                                     "data-sticky-position": c.config.sticky,
                                 }) }, c.key && (React.createElement("div", { className: "filter-field" },
-                                React.createElement(Input, { ref: (element) => (_searchTextInputs.current[cIndex] = element), variant: c.key && !c.filters ? "filled" : "outlined", status: "light", name: typeof c.key !== "object" ? String(c.key) : String(c.key.field), onChange: handleSearch, disabled: !c.key || !!c.filters }),
-                                c.filters && (React.createElement(Popover, { content: React.createElement("div", null, c.filters.map((filter, fIndex) => {
-                                        const name = typeof c.key !== "object" ? String(c.key) : String(c.key.field);
-                                        return (React.createElement("div", null,
-                                            React.createElement(Checkbox, { ref: (element) => (_filterCheckboxItems.current[fIndex] = element), label: filter.text, name: name, status: "primary", value: filter.value, checked: checkboxSelectedParams?.[name]?.includes(String(filter.value)), onChange: async (event) => await handleCheckboxChange(event) })));
-                                    })), windowBlur: true },
-                                    React.createElement(Button, { variant: "borderless", icon: { element: React.createElement(ARIcon, { icon: "Filter", stroke: "var(--primary)", size: 16 }) } })))))));
+                                React.createElement(Input, { ref: (element) => (_searchTextInputs.current[cIndex] = element), variant: c.key && !c.filters ? "outlined" : "filled", status: "light", style: { height: "2rem" }, value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onInput: handleSearch, disabled: !c.key || !!c.filters }),
+                                React.createElement("span", { ref: (element) => (_filterButton.current[cIndex] = element), onClick: (event) => {
+                                        event.stopPropagation();
+                                        // Temizlik...
+                                        setFilterPopupOptionSearchText("");
+                                        const rect = event.currentTarget.getBoundingClientRect();
+                                        const screenCenterX = window.innerWidth / 2;
+                                        // const screenCenterY = window.innerHeight / 2;
+                                        const coordinateX = rect.x > screenCenterX ? rect.x + rect.width - 225 : rect.x;
+                                        const coordinateY = rect.y + rect.height;
+                                        // data içindeki alanların tiplerini bulmak için kullanılmaktadır
+                                        const getDataFirstItem = { ...data[0] };
+                                        const key = typeof c.key !== "object" ? String(c.key) : String(c.key.field);
+                                        const getValueByKey = getDataFirstItem[key];
+                                        let dataType = typeof getValueByKey;
+                                        if (getValueByKey == null)
+                                            dataType = "string";
+                                        setFilterButtonCoordinate({ x: coordinateX, y: coordinateY });
+                                        setFilterCurrentColumn(c);
+                                        setFilterCurrentDataType(dataType);
+                                        setFilterCurrentIndex(cIndex);
+                                        handleFilterPopupContent(c, dataType, cIndex);
+                                    } },
+                                    React.createElement(Button, { variant: "borderless", status: "dark", icon: {
+                                            element: (React.createElement(ARIcon, { viewBox: "0 0 16 16", size: 24, icon: "Filter", fill: "var(--dark)", strokeWidth: 0 })),
+                                        } }))))));
                         })))),
                 React.createElement("tbody", null, getData.map((item, index) => (React.createElement(React.Fragment, { key: index }, renderRow(item, index))))))),
+        React.createElement(FilterPopup, { tableContent: _tableContent, coordinate: filterButtonCoordinate, buttons: _filterButton }, filterPopupContent),
         pagination && pagination.totalRecords > pagination.perPage && (React.createElement("div", { className: "footer" },
             React.createElement("span", null,
                 React.createElement("strong", null,

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

@@ -1,24 +1,19 @@
 "use client";
-import React, { forwardRef, useEffect, useRef, useState } from "react";
-import "../../../assets/css/components/form/checkbox/checkbox.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
+import React, { forwardRef, useRef } from "react";
+import "../../../assets/css/components/form/checkbox/checkbox.css";
 const Checkbox = forwardRef(({ label, size = "normal", status, border = { radius: "sm" }, upperCase, ...attributes }, ref) => {
     // refs
     const _checkbox = useRef(null);
     const _checkboxClassName = ["ar-checkbox"];
-    // states
-    const [checked, setChecked] = useState(attributes.checked ?? false);
-    _checkboxClassName.push(...Utils.GetClassName("filled", checked ? status : "light", border, size, undefined, attributes.className));
-    // useEffects
-    useEffect(() => {
-        setChecked(attributes.checked ?? attributes.defaultChecked ?? false);
-    }, [attributes.checked, attributes.defaultChecked]);
+    const isChecked = attributes.checked ?? false;
+    _checkboxClassName.push(...Utils.GetClassName("filled", isChecked ? status : "light", border, size, undefined, attributes.className));
     return (React.createElement("div", { className: "ar-checkbox-wrapper" },
         React.createElement("label", null,
             React.createElement("input", { ref: ref, type: "checkbox", ...attributes, size: 0, onChange: (event) => {
-                    (() => {
-                        setChecked(event.target.checked);
-                    })();
+                    // (() => {
+                    //   attributes.onChange?.(event);
+                    // })();
                     (() => attributes.onChange && attributes.onChange(event))();
                 } }),
             React.createElement("span", null,

package/dist/components/icons/Compiler.js

@@ -86,7 +86,7 @@ class Icon {
                             React.createElement("line", { x1: "4", y1: this._finishIndex, x2: "20", y2: this._finishIndex, stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
                     case "Filter":
                         return (React.createElement(React.Fragment, null,
-                            React.createElement("path", { d: "M5.4 2.1h13.2c1.1 0 2 .9 2 2v2.2c0 .8-.5 1.8-1 2.3l-4.3 3.8c-.6.5-1 1.5-1 2.3V19c0 .6-.4 1.4-.9 1.7l-1.4.9c-1.3.8-3.1-.1-3.1-1.7v-5.3c0-.7-.4-1.6-.8-2.1l-3.8-4c-.5-.5-.9-1.4-.9-2V4.2c0-1.2.9-2.1 2-2.1ZM10.93 2.1 6 10", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })));
+                            React.createElement("path", { d: "M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })));
                     case "TickCircle":
                         return (React.createElement(React.Fragment, null,
                             React.createElement("path", { d: "M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10Z", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),

package/dist/components/icons/Svg.js

@@ -1,5 +1,5 @@
 import React from "react";
-const Svg = ({ children, fill = "none", width = 32, height = 32, style, }) => {
-    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: fill, width: width, height: height, style: style }, children));
+const Svg = ({ children, viewBox, fill = "none", width = 32, height = 32, style, }) => {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox ?? "0 0 24 24", fill: fill, width: width, height: height, style: style }, children));
 };
 export default Svg;

package/dist/components/icons/index.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { Icons, IconVariants } from "../../libs/types";
 export declare const ARIcon: React.FC<{
+    viewBox?: string;
     size?: string | number | undefined;
     variant?: IconVariants;
     icon: Icons;

package/dist/components/icons/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Svg from "./Svg";
 import Icon from "./Compiler";
-export const ARIcon = ({ size, variant = "linear", icon, fill = "var(--dark)", stroke = "var(--dark)", strokeWidth = 2, style }) => {
+export const ARIcon = ({ viewBox, size, variant = "linear", icon, fill = "var(--dark)", stroke = "var(--dark)", strokeWidth = 2, style, }) => {
     const { Compiler } = new Icon(fill, stroke, strokeWidth);
-    return (React.createElement(Svg, { width: size, height: size, style: style }, Compiler(variant, icon)));
+    return (React.createElement(Svg, { viewBox: viewBox, fill: fill, width: size, height: size, style: style }, Compiler(variant, icon)));
 };

package/dist/libs/infrastructure/shared/Enums.d.ts

@@ -0,0 +1,10 @@
+export declare enum FilterOperator {
+    Contains = 1,
+    DoesNotContains = 2,
+    Equals = 3,
+    DoesNotEquals = 4,
+    BeginsWith = 5,
+    EndsWith = 6,
+    Blank = 7,
+    NotBlank = 8
+}

package/dist/libs/infrastructure/shared/Enums.js

@@ -0,0 +1,11 @@
+export var FilterOperator;
+(function (FilterOperator) {
+    FilterOperator[FilterOperator["Contains"] = 1] = "Contains";
+    FilterOperator[FilterOperator["DoesNotContains"] = 2] = "DoesNotContains";
+    FilterOperator[FilterOperator["Equals"] = 3] = "Equals";
+    FilterOperator[FilterOperator["DoesNotEquals"] = 4] = "DoesNotEquals";
+    FilterOperator[FilterOperator["BeginsWith"] = 5] = "BeginsWith";
+    FilterOperator[FilterOperator["EndsWith"] = 6] = "EndsWith";
+    FilterOperator[FilterOperator["Blank"] = 7] = "Blank";
+    FilterOperator[FilterOperator["NotBlank"] = 8] = "NotBlank";
+})(FilterOperator || (FilterOperator = {}));

package/package.json

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