ar-design 0.4.21 → 0.4.23

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

@@ -210,6 +210,81 @@
   }
 }
 
+.filters {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 1rem;
+  background-color: var(--white);
+  margin-bottom: 1rem;
+  border-radius: var(--border-radius-lg);
+  z-index: 6;
+
+  > :first-child {
+    flex: 1;
+  }
+
+  > ul {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+
+    > li {
+      position: relative;
+      padding: 0.5rem;
+      cursor: pointer;
+      user-select: none;
+
+      &.active {
+        background-color: var(--gray-100);
+
+        > ul {
+          animation: dropdownOpen 250ms ease-in-out;
+        }
+      }
+
+      > div {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+
+        > span {
+          color: var(--gray-500);
+          font-weight: 500;
+        }
+      }
+
+      > ul {
+        position: absolute;
+        top: 100%;
+        right: 0;
+        background-color: var(--gray-100);
+        width: max-content;
+        padding: 1rem;
+        border-bottom-left-radius: var(--border-radius-sm);
+        border-bottom-right-radius: var(--border-radius-sm);
+        box-shadow: 0px 5px 5px -2px rgba(var(--black-rgb), 0.1);
+
+        > li {
+          cursor: auto;
+        }
+      }
+    }
+  }
+}
+
+@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/IProps.d.ts

@@ -10,6 +10,14 @@ interface IProps<T, TColumnProperties> {
             bottom?: number;
             left?: number;
         };
+        filter?: {
+            search?: (item: T, value: string) => boolean;
+            keys: (item: T) => {
+                name: string;
+                key: string;
+                type: "select" | "date";
+            }[];
+        };
     };
 }
 export default IProps;

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

@@ -0,0 +1,23 @@
+import React, { Dispatch, SetStateAction } from "react";
+interface IProps {
+    states: {
+        dateFilters: {
+            get: Record<string, {
+                from: Date | null;
+                to: Date | null;
+            }>;
+            set: Dispatch<SetStateAction<Record<string, {
+                from: Date | null;
+                to: Date | null;
+            }>>>;
+        };
+        openName: {
+            get: string | null;
+        };
+    };
+    methods: {
+        open: (name: string | null) => void;
+    };
+}
+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/filter/SelectFilters.d.ts

@@ -0,0 +1,25 @@
+import React, { Dispatch, SetStateAction } from "react";
+interface IProps {
+    states: {
+        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>>>>;
+        };
+        openName: {
+            get: string | null;
+        };
+    };
+    methods: {
+        open: (name: string | null) => void;
+    };
+}
+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,6 +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 Filter from "./filter";
 const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
     // refs
     const _kanbanWrapper = useRef(null);
@@ -12,6 +13,11 @@ const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
     const _scrollSpeedRef = useRef(0); // px/frame
     // states
     const [data, setData] = useState([]);
+    // states -> Filters
+    const [search, setSearch] = useState("");
+    const [selectFilters, setSelectFilters] = useState({});
+    const [selectedFilters, setSelectedFilters] = useState({});
+    const [dateFilters, setDateFilters] = useState({});
     // methods
     const handleBoardDragOver = (event) => {
         event.preventDefault();
@@ -130,33 +136,125 @@ const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
                 .slice(1));
     };
     // useEffects
-    useEffect(() => setData(columns), [columns]);
-    return (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 },
-        React.createElement("div", { className: "buttons" },
-            React.createElement("div", { className: "button left", onMouseDown: () => handleStartScroll("left"), onMouseUp: handleStopScroll, onMouseLeave: handleStopScroll },
-                React.createElement(ARIcon, { icon: "ArrowLeft" })),
-            React.createElement("div", { className: "button right", onMouseDown: () => handleStartScroll("right"), onMouseUp: handleStopScroll, onMouseLeave: handleStopScroll },
-                React.createElement(ARIcon, { icon: "ArrowRight" }))),
-        React.createElement("div", { className: "titles" }, data.map((board, index) => (React.createElement("div", { key: index, className: "title" },
-            React.createElement("h4", null,
-                React.createElement("span", { style: {
-                        backgroundColor: darkenColor(board.titleColor ?? "", 1),
-                        borderColor: darkenColor(board.titleColor ?? "", 1),
-                    } }),
-                board.title.toLocaleUpperCase("tr")),
-            board.description && React.createElement("span", null, board.description))))),
-        React.createElement("div", { className: "columns" }, data.map((board, index) => (React.createElement("div", { key: index, className: "column", onDrop: handleDrop(board.key) },
-            React.createElement("div", { className: "items", onDragOver: handleItemsDragOver, onDragLeave: handleItemsDragLeave, onDrop: handleItemsDrop },
-                React.createElement(DnD, { key: board.key, data: board.items, renderItem: (item, index) => {
-                        return (React.createElement("div", { key: index, className: "item", onDragOver: (event) => {
-                                event.preventDefault();
-                                const rect = event.currentTarget.getBoundingClientRect();
-                                const mouseY = event.clientY;
-                                const isBelow = mouseY > rect.top + rect.height / 2;
-                                _hoverItemIndex.current = isBelow ? index + 1 : index;
-                            } }, board.renderItem(item, index)));
-                    }, columnKey: board.key, confing: { isMoveIcon: false } }))))))));
+    useEffect(() => {
+        const selectMap = new Map();
+        const dateMap = new Map();
+        columns.forEach((col) => {
+            col.items.forEach((item) => {
+                const keys = config?.filter?.keys(item);
+                keys?.forEach((k) => {
+                    if (k.type === "select") {
+                        if (!selectMap.has(k.name))
+                            selectMap.set(k.name, new Set());
+                        selectMap.get(k.name).add(k.key ?? null);
+                    }
+                    if (k.type === "date")
+                        dateMap.set(k.name, true);
+                });
+            });
+        });
+        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) => {
+                if (!next[name]) {
+                    next[name] = { from: null, to: null };
+                }
+            });
+            return next;
+        });
+    }, [columns]);
+    useEffect(() => {
+        let nextData = columns.map((col) => ({
+            ...col,
+            items: [...col.items],
+        }));
+        // Search varsa...
+        if (config?.filter?.search && search?.trim()) {
+            const q = search.trim();
+            nextData = nextData.map((col) => ({
+                ...col,
+                items: col.items.filter((item) => config.filter.search(item, q)),
+            }));
+        }
+        // Select ve Date varsa...
+        nextData = nextData.map((col) => ({
+            ...col,
+            items: col.items.filter((item) => {
+                const keys = config?.filter?.keys(item) ?? [];
+                // Select (checkbox)
+                const selectOk = Object.entries(selectedFilters).every(([filterName, selectedSet]) => {
+                    if (!selectedSet || selectedSet.size === 0)
+                        return true;
+                    const value = keys.find((k) => k.name === filterName)?.key ?? null;
+                    return selectedSet.has(value);
+                });
+                if (!selectOk)
+                    return false;
+                // Date (range)
+                const dateOk = Object.entries(dateFilters).every(([filterName, range]) => {
+                    if (!range.from && !range.to)
+                        return true;
+                    const raw = keys.find((k) => k.name === filterName)?.key;
+                    if (!raw)
+                        return false;
+                    const d = new Date(raw);
+                    if (range.from && d < range.from)
+                        return false;
+                    if (range.to && d > range.to)
+                        return false;
+                    return true;
+                });
+                return dateOk;
+            }),
+        }));
+        setData(nextData);
+    }, [columns, search, selectedFilters, dateFilters]);
+    return (React.createElement(React.Fragment, null,
+        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 },
+            React.createElement("div", { className: "buttons" },
+                React.createElement("div", { className: "button left", onMouseDown: () => handleStartScroll("left"), onMouseUp: handleStopScroll, onMouseLeave: handleStopScroll },
+                    React.createElement(ARIcon, { icon: "ArrowLeft" })),
+                React.createElement("div", { className: "button right", onMouseDown: () => handleStartScroll("right"), onMouseUp: handleStopScroll, onMouseLeave: handleStopScroll },
+                    React.createElement(ARIcon, { icon: "ArrowRight" }))),
+            React.createElement("div", { className: "titles" }, data.map((board, index) => (React.createElement("div", { key: index, className: "title" },
+                React.createElement("h4", null,
+                    React.createElement("span", { style: {
+                            backgroundColor: darkenColor(board.titleColor ?? "", 1),
+                            borderColor: darkenColor(board.titleColor ?? "", 1),
+                        } }),
+                    board.title.toLocaleUpperCase("tr")),
+                board.description && React.createElement("span", null, board.description))))),
+            React.createElement("div", { className: "columns" }, data.map((board, index) => (React.createElement("div", { key: index, className: "column", onDrop: handleDrop(board.key) },
+                React.createElement("div", { className: "items", onDragOver: handleItemsDragOver, onDragLeave: handleItemsDragLeave, onDrop: handleItemsDrop },
+                    React.createElement(DnD, { key: board.key, data: board.items, renderItem: (item, dndIndex) => {
+                            return (React.createElement("div", { key: dndIndex, className: "item", onDragOver: (event) => {
+                                    event.preventDefault();
+                                    const rect = event.currentTarget.getBoundingClientRect();
+                                    const mouseY = event.clientY;
+                                    const isBelow = mouseY > rect.top + rect.height / 2;
+                                    _hoverItemIndex.current = isBelow ? index + 1 : index;
+                                } }, board.renderItem(item, index)));
+                        }, columnKey: board.key, confing: { isMoveIcon: false } })))))))));
 };
 export default KanbanBoard;

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.21",
+  "version": "0.4.23",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",