ar-design 0.4.22 → 0.4.23

package/dist/assets/css/components/data-display/kanban-board/styles.css

@@ -234,13 +234,13 @@
       position: relative;
       padding: 0.5rem;
       cursor: pointer;
-      transition: background-color 150ms ease-in-out;
+      user-select: none;
 
-      &:hover {
+      &.active {
         background-color: var(--gray-100);
 
         > ul {
-          display: block;
+          animation: dropdownOpen 250ms ease-in-out;
         }
       }
 
@@ -256,7 +256,6 @@
       }
 
       > ul {
-        display: none;
         position: absolute;
         top: 100%;
         right: 0;
@@ -275,6 +274,17 @@
   }
 }
 
+@keyframes dropdownOpen {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 /* --- [KÜÇÜK MOBİL - IPHONE SE VB.] --- */
 /* Çok dar ekranlar için özel düzeltmeler */
 @media (max-width: 375px) {

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

@@ -10,7 +10,6 @@
   flex-direction: row;
 }
 .ar-date-picker > label {
-  background-color: var(--white);
   position: absolute;
   top: -0.5rem;
   left: 0.55rem;

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

@@ -0,0 +1,6 @@
+interface IProps {
+    config?: {
+        margin: string | number;
+    };
+}
+export default IProps;

package/dist/components/data-display/divider/IProps.js

@@ -0,0 +1 @@
+export {};

package/dist/components/data-display/divider/index.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import "../../../assets/css/components/data-display/divider/divider.css";
-declare const Divider: React.FC;
+import IProps from "./IProps";
+declare const Divider: React.FC<IProps>;
 export default Divider;

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

@@ -1,5 +1,5 @@
 import React from "react";
 import "../../../assets/css/components/data-display/divider/divider.css";
-const Divider = () => React.createElement("hr", { className: "ar-divider" });
+const Divider = ({ config }) => React.createElement("hr", { className: "ar-divider", style: { margin: config?.margin } });
 Divider.displayName = "Divider";
 export default Divider;

package/dist/components/data-display/kanban-board/{DateFilters.d.ts → filter/DateFilters.d.ts}

@@ -11,7 +11,13 @@ interface IProps {
                 to: Date | null;
             }>>>;
         };
+        openName: {
+            get: string | null;
+        };
+    };
+    methods: {
+        open: (name: string | null) => void;
     };
 }
-declare const DateFilters: ({ states }: IProps) => React.JSX.Element[];
-export default DateFilters;
+declare const _default: React.MemoExoticComponent<({ states, methods }: IProps) => React.JSX.Element[]>;
+export default _default;

package/dist/components/data-display/kanban-board/filter/DateFilters.js

@@ -0,0 +1,52 @@
+import React, { memo } from "react";
+import DatePicker from "../../../form/date-picker";
+import { ARIcon } from "../../../icons";
+import Grid from "../../grid-system";
+import Button from "../../../form/button";
+import Divider from "../../divider";
+const { Row, Column, Box } = Grid;
+const DateFilters = ({ states, methods }) => {
+    return Object.entries(states.dateFilters.get).map(([name, range], index) => {
+        const isEqualsName = states.openName.get === name;
+        const className = [];
+        if (isEqualsName)
+            className.push("active");
+        return (React.createElement(React.Fragment, null,
+            React.createElement("li", { key: index, className: className.map((c) => c).join(" "), onClick: () => methods.open(name) },
+                React.createElement("div", null,
+                    React.createElement("span", null, name),
+                    React.createElement(ARIcon, { icon: "ChevronDown" })),
+                isEqualsName && (React.createElement("ul", { className: className.map((c) => c).join(" "), onClick: (event) => event.stopPropagation() },
+                    React.createElement(Row, null,
+                        React.createElement(Column, null,
+                            React.createElement(DatePicker, { value: range.from?.toISOString(), onChange: (value) => {
+                                    states.dateFilters.set((prev) => ({
+                                        ...prev,
+                                        [name]: {
+                                            ...prev[name],
+                                            from: new Date(value),
+                                        },
+                                    }));
+                                }, placeholder: "From" }))),
+                    React.createElement(Row, null,
+                        React.createElement(Column, null,
+                            React.createElement(DatePicker, { value: range.to?.toISOString(), onChange: (value) => {
+                                    states.dateFilters.set((prev) => ({
+                                        ...prev,
+                                        [name]: {
+                                            ...prev[name],
+                                            to: new Date(value),
+                                        },
+                                    }));
+                                }, placeholder: "To" }))),
+                    React.createElement(Divider, { config: { margin: "0.5rem 0" } }),
+                    React.createElement(Box, { direction: "flex-end" },
+                        React.createElement(Button, { color: "red", size: "small", onClick: () => {
+                                states.dateFilters.set((prev) => ({
+                                    ...prev,
+                                    [name]: { from: null, to: null },
+                                }));
+                            } }, "Clear")))))));
+    });
+};
+export default memo(DateFilters);

package/dist/components/data-display/kanban-board/{SelectFilters.d.ts → filter/SelectFilters.d.ts}

@@ -13,7 +13,13 @@ interface IProps {
             get: Record<string, Set<string | null>>;
             set: Dispatch<SetStateAction<Record<string, Set<string | null>>>>;
         };
+        openName: {
+            get: string | null;
+        };
+    };
+    methods: {
+        open: (name: string | null) => void;
     };
 }
-declare const SelectFilters: ({ states }: IProps) => React.JSX.Element[];
+declare const SelectFilters: ({ states, methods }: IProps) => React.JSX.Element[];
 export default SelectFilters;

package/dist/components/data-display/kanban-board/filter/SelectFilters.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { ARIcon } from "../../../icons";
+import Checkbox from "../../../form/checkbox";
+import Grid from "../../grid-system";
+import Button from "../../../form/button";
+import Divider from "../../divider";
+const { Box } = Grid;
+const SelectFilters = ({ states, methods }) => {
+    return Object.entries(states.selectFilters.get).map(([name, values], index) => {
+        const isEqualsName = states.openName.get === name;
+        const className = [];
+        if (isEqualsName)
+            className.push("active");
+        return (React.createElement("li", { key: index, className: className.map((c) => c).join(" "), onClick: () => methods.open(name) },
+            React.createElement("div", null,
+                React.createElement("span", null, name),
+                React.createElement(ARIcon, { icon: "ChevronDown" })),
+            isEqualsName && (React.createElement("ul", { className: className.map((c) => c).join(" "), onClick: (event) => event.stopPropagation() },
+                values.map((value, index) => (React.createElement("li", { key: index },
+                    React.createElement(Checkbox, { label: String(value ?? "-"), checked: states.selectedFilters.get[name]?.has(value) ?? false, onChange: () => {
+                            states.selectedFilters.set((prev) => {
+                                const next = { ...prev };
+                                const set = new Set(next[name] ?? []);
+                                set.has(value) ? set.delete(value) : set.add(value);
+                                next[name] = set;
+                                return next;
+                            });
+                        } })))),
+                React.createElement(Divider, { config: { margin: "0.5rem 0" } }),
+                React.createElement(Box, { direction: "flex-end" },
+                    React.createElement(Button, { color: "red", size: "small", onClick: () => {
+                            states.selectedFilters.set((prev) => {
+                                const next = { ...prev };
+                                delete next[name];
+                                return next;
+                            });
+                        } }, "Clear"))))));
+    });
+};
+export default SelectFilters;

package/dist/components/data-display/kanban-board/filter/index.d.ts

@@ -0,0 +1,34 @@
+import { Dispatch, SetStateAction } from "react";
+import React from "react";
+interface IProps {
+    states: {
+        search: {
+            get: string;
+            set: Dispatch<React.SetStateAction<string>>;
+        };
+        dateFilters: {
+            get: Record<string, {
+                from: Date | null;
+                to: Date | null;
+            }>;
+            set: Dispatch<SetStateAction<Record<string, {
+                from: Date | null;
+                to: Date | null;
+            }>>>;
+        };
+        selectFilters: {
+            get: {
+                [key: string]: (string | null)[];
+            };
+            set: Dispatch<SetStateAction<{
+                [key: string]: (string | null)[];
+            }>>;
+        };
+        selectedFilters: {
+            get: Record<string, Set<string | null>>;
+            set: Dispatch<SetStateAction<Record<string, Set<string | null>>>>;
+        };
+    };
+}
+declare const Filter: ({ states }: IProps) => React.JSX.Element;
+export default Filter;

package/dist/components/data-display/kanban-board/filter/index.js

@@ -0,0 +1,36 @@
+"use client";
+import { useState } from "react";
+import DateFilters from "./DateFilters";
+import SelectFilters from "./SelectFilters";
+import React from "react";
+import Input from "../../../form/input";
+const Filter = ({ states }) => {
+    // states
+    const [openName, setOpenName] = useState(null);
+    // methods
+    const handleOpen = (name) => setOpenName(openName === name ? null : name);
+    return (React.createElement("div", { className: "filters" },
+        React.createElement(Input, { variant: "borderless", placeholder: "Filter by keyword", onChange: (event) => states.search.set(event.target.value.toLocaleLowerCase()) }),
+        React.createElement("ul", null,
+            React.createElement(DateFilters, { states: {
+                    dateFilters: {
+                        get: states.dateFilters.get,
+                        set: states.dateFilters.set,
+                    },
+                    openName: { get: openName },
+                }, methods: {
+                    open: handleOpen,
+                } }),
+            React.createElement(SelectFilters, { states: {
+                    selectFilters: {
+                        get: states.selectFilters.get,
+                        set: states.selectFilters.set,
+                    },
+                    selectedFilters: {
+                        get: states.selectedFilters.get,
+                        set: states.selectedFilters.set,
+                    },
+                    openName: { get: openName },
+                }, methods: { open: handleOpen } }))));
+};
+export default Filter;

package/dist/components/data-display/kanban-board/index.js

@@ -3,9 +3,7 @@ import React, { useEffect, useRef, useState } from "react";
 import "../../../assets/css/components/data-display/kanban-board/styles.css";
 import DnD from "../dnd";
 import { ARIcon } from "../../icons";
-import Input from "../../form/input";
-import DateFilters from "./DateFilters";
-import SelectFilters from "./SelectFilters";
+import Filter from "./filter";
 const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
     // refs
     const _kanbanWrapper = useRef(null);
@@ -155,10 +153,7 @@ const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
                 });
             });
         });
-        // checkbox filtre seçenekleri
-        const nextSelectFilters = Object.fromEntries(Array.from(selectMap.entries()).map(([name, set]) => [name, Array.from(set)]));
-        setSelectFilters(nextSelectFilters);
-        // date filtreler (sadece isim + boş range)
+        setSelectFilters(Object.fromEntries(Array.from(selectMap.entries()).map(([name, set]) => [name, Array.from(set)])));
         setDateFilters((prev) => {
             const next = { ...prev };
             Array.from(dateMap.keys()).forEach((name) => {
@@ -216,25 +211,24 @@ const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
         setData(nextData);
     }, [columns, search, selectedFilters, dateFilters]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "filters" },
-            React.createElement(Input, { variant: "borderless", placeholder: "Filter by keyword", onChange: (event) => setSearch(event.target.value.toLocaleLowerCase()) }),
-            React.createElement("ul", null,
-                React.createElement(DateFilters, { states: {
-                        dateFilters: {
-                            get: dateFilters,
-                            set: setDateFilters,
-                        },
-                    } }),
-                React.createElement(SelectFilters, { states: {
-                        selectFilters: {
-                            get: selectFilters,
-                            set: setSelectFilters,
-                        },
-                        selectedFilters: {
-                            get: selectedFilters,
-                            set: setSelectedFilters,
-                        },
-                    } }))),
+        config?.filter && (React.createElement(Filter, { states: {
+                search: {
+                    get: search,
+                    set: setSearch,
+                },
+                dateFilters: {
+                    get: dateFilters,
+                    set: setDateFilters,
+                },
+                selectFilters: {
+                    get: selectFilters,
+                    set: setSelectFilters,
+                },
+                selectedFilters: {
+                    get: selectedFilters,
+                    set: setSelectedFilters,
+                },
+            } })),
         React.createElement("div", { ref: _kanbanWrapper, className: "ar-kanban-board", style: {
                 height: `calc(100dvh - (${_kanbanWrapper.current?.getBoundingClientRect().top}px + ${config?.safeAreaOffset?.bottom ?? 0}px))`,
             }, onDragOver: handleBoardDragOver, onDragEnd: stopScrolling, onDrop: stopScrolling },

package/dist/components/form/date-picker/index.js

@@ -25,6 +25,7 @@ const DatePicker = ({ variant, color, onChange, config, validation, ...attribute
     // refs
     const _arCalendar = useRef(null);
     const _arClock = useRef(null);
+    const _placeholder = useRef(null);
     const _calendarHeader = useRef(null);
     const _calendarFooter = useRef(null);
     const _clockHeader = useRef(null);
@@ -247,45 +248,61 @@ const DatePicker = ({ variant, color, onChange, config, validation, ...attribute
         setYears(years);
     }, [selectedYear]);
     return (React.createElement("div", { className: "ar-date-picker" },
-        attributes.placeholder && attributes.placeholder.length > 0 && (React.createElement("label", null,
+        attributes.placeholder && attributes.placeholder.length > 0 && (React.createElement("label", { ref: _placeholder },
             validation ? "* " : "",
             attributes.placeholder)),
-        React.createElement(Input, { ref: _beginDate, variant: variant, color: color, ...attributes, value: DATE.ParseValue(String(attributes.value), config?.isClock), type: config?.isClock ? "datetime-local" : "date", onKeyDown: (event) => {
-                if (event.code === "Space")
+        React.createElement("div", { className: "wrapper", ...(String(attributes.value).length > 0
+                ? {
+                    style: {
+                        clipPath: `polygon(
+                            -15px 0,
+                            10px -5px,
+                            10px 5px,
+                            calc(${_placeholder.current?.getBoundingClientRect().width}px + 7px) 5px,
+                            calc(${_placeholder.current?.getBoundingClientRect().width}px + 7px) -5px,
+                            100% -70px,
+                            calc(100% + 5px) calc(100% + 5px),
+                            -5px calc(100% + 5px)
+                          )`,
+                    },
+                }
+                : {}) },
+            React.createElement(Input, { ref: _beginDate, variant: variant, color: color, ...attributes, value: DATE.ParseValue(String(attributes.value), config?.isClock), type: config?.isClock ? "datetime-local" : "date", onKeyDown: (event) => {
+                    if (event.code === "Space")
+                        event.preventDefault();
+                    else if (event.code === "Enter")
+                        handleOk();
+                }, onChange: (event) => {
+                    // Disabled gelmesi durumunda işlem yapmasına izin verme...
+                    if (attributes.disabled)
+                        return;
+                    (() => {
+                        if (!calendarIsOpen)
+                            setCalendarIsOpen(true);
+                        const value = event.target.value;
+                        const [date, time] = value.split("T");
+                        const [year, month, day] = date.split("-").map(Number);
+                        const hours = time ? time.split(".")[0].split(":").map(Number)[0] : 0;
+                        const minutes = time ? time.split(".")[0].split(":").map(Number)[1] : 0;
+                        _year.current = year;
+                        _month.current = month - 1;
+                        _day.current = day;
+                        if (hours || minutes) {
+                            _hours.current = hours;
+                            _minutes.current = minutes;
+                        }
+                        // Yıl ve Ay'ı anlık yeniler.
+                        setSelectedYear(_year.current);
+                        setSelectedMonth(_month.current);
+                        // Takvimi anlık yeniler.
+                        setDateChanged((prev) => !prev);
+                        setTimeChanged((prev) => !prev);
+                        onChange(value);
+                    })();
+                }, onClick: (event) => {
                     event.preventDefault();
-                else if (event.code === "Enter")
-                    handleOk();
-            }, onChange: (event) => {
-                // Disabled gelmesi durumunda işlem yapmasına izin verme...
-                if (attributes.disabled)
-                    return;
-                (() => {
-                    if (!calendarIsOpen)
-                        setCalendarIsOpen(true);
-                    const value = event.target.value;
-                    const [date, time] = value.split("T");
-                    const [year, month, day] = date.split("-").map(Number);
-                    const hours = time ? time.split(".")[0].split(":").map(Number)[0] : 0;
-                    const minutes = time ? time.split(".")[0].split(":").map(Number)[1] : 0;
-                    _year.current = year;
-                    _month.current = month - 1;
-                    _day.current = day;
-                    if (hours || minutes) {
-                        _hours.current = hours;
-                        _minutes.current = minutes;
-                    }
-                    // Yıl ve Ay'ı anlık yeniler.
-                    setSelectedYear(_year.current);
-                    setSelectedMonth(_month.current);
-                    // Takvimi anlık yeniler.
-                    setDateChanged((prev) => !prev);
-                    setTimeChanged((prev) => !prev);
-                    onChange(value);
-                })();
-            }, onClick: (event) => {
-                event.preventDefault();
-                setCalendarIsOpen(true);
-            }, autoComplete: "off", validation: validation }),
+                    setCalendarIsOpen(true);
+                }, autoComplete: "off", validation: validation })),
         calendarIsOpen &&
             ReactDOM.createPortal(React.createElement("div", { ref: _arCalendar, className: "ar-date-calendar" },
                 React.createElement("div", { ref: _calendarHeader, className: "header" },

package/package.json

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

package/dist/components/data-display/kanban-board/DateFilters.js

@@ -1,35 +0,0 @@
-import React from "react";
-import DatePicker from "../../form/date-picker";
-import { ARIcon } from "../../icons";
-import Grid from "../grid-system";
-const { Row, Column } = Grid;
-const DateFilters = ({ states }) => {
-    return Object.entries(states.dateFilters.get).map(([name, range]) => (React.createElement("li", { key: name, className: "filter-box" },
-        React.createElement("div", null,
-            React.createElement("span", null, name),
-            React.createElement(ARIcon, { icon: "ChevronDown" })),
-        React.createElement("ul", null,
-            React.createElement(Row, null,
-                React.createElement(Column, null,
-                    React.createElement(DatePicker, { value: range.from?.toISOString(), onChange: (value) => {
-                            states.dateFilters.set((prev) => ({
-                                ...prev,
-                                [name]: {
-                                    ...prev[name],
-                                    from: new Date(value),
-                                },
-                            }));
-                        } }))),
-            React.createElement(Row, null,
-                React.createElement(Column, null,
-                    React.createElement(DatePicker, { value: range.to?.toISOString(), onChange: (value) => {
-                            states.dateFilters.set((prev) => ({
-                                ...prev,
-                                [name]: {
-                                    ...prev[name],
-                                    to: new Date(value),
-                                },
-                            }));
-                        } })))))));
-};
-export default DateFilters;

package/dist/components/data-display/kanban-board/SelectFilters.js

@@ -1,20 +0,0 @@
-import React from "react";
-import { ARIcon } from "../../icons";
-import Checkbox from "../../form/checkbox";
-const SelectFilters = ({ states }) => {
-    return Object.entries(states.selectFilters.get).map(([name, values]) => (React.createElement("li", null,
-        React.createElement("div", null,
-            React.createElement("span", null, name),
-            React.createElement(ARIcon, { icon: "ChevronDown" })),
-        React.createElement("ul", null, values.map((val) => (React.createElement("li", null,
-            React.createElement(Checkbox, { label: String(val ?? "-"), checked: states.selectedFilters.get[name]?.has(val) ?? false, onChange: () => {
-                    states.selectedFilters.set((prev) => {
-                        const next = { ...prev };
-                        const set = new Set(next[name] ?? []);
-                        set.has(val) ? set.delete(val) : set.add(val);
-                        next[name] = set;
-                        return next;
-                    });
-                } }))))))));
-};
-export default SelectFilters;