ar-design 0.4.42 → 0.4.44

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

@@ -1,23 +1,25 @@
 import { KanbanBoardColumnType } from "../../../libs/types";
-interface IProps<T, TColumnProperties> {
+export type Config<T extends object> = {
+    locale?: Intl.LocalesArgument;
+    safeAreaOffset?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    filter?: {
+        search?: (item: T, value: string) => boolean;
+        keys: (item: T) => {
+            name: string;
+            key: string;
+            type: "select" | "date";
+        }[];
+    };
+};
+interface IProps<T extends object, TColumnProperties> {
     trackBy: (item: T) => string;
     columns: KanbanBoardColumnType<T, TColumnProperties>[];
     onChange?: (item: T, columnKey: string, columnProperties: TColumnProperties, hoverIndex: number) => void;
-    config?: {
-        safeAreaOffset?: {
-            top?: number;
-            right?: number;
-            bottom?: number;
-            left?: number;
-        };
-        filter?: {
-            search?: (item: T, value: string) => boolean;
-            keys: (item: T) => {
-                name: string;
-                key: string;
-                type: "select" | "date";
-            }[];
-        };
-    };
+    config?: Config<T>;
 }
 export default IProps;

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

@@ -1,5 +1,6 @@
-import React, { Dispatch, SetStateAction } from "react";
-interface IProps {
+import { Dispatch, JSX, SetStateAction } from "react";
+import { Config } from "../IProps";
+interface IProps<T extends object> {
     states: {
         dateFilters: {
             get: Record<string, {
@@ -18,6 +19,7 @@ interface IProps {
     methods: {
         open: (name: string | null) => void;
     };
+    config?: Config<T>;
 }
-declare const _default: React.MemoExoticComponent<({ states, methods }: IProps) => React.JSX.Element[]>;
+declare const _default: <T extends object>(props: IProps<T>) => JSX.Element;
 export default _default;

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

@@ -4,8 +4,11 @@ import { ARIcon } from "../../../icons";
 import Grid from "../../grid-system";
 import Button from "../../../form/button";
 import Divider from "../../divider";
+import { useTranslation } from "../../../../libs/core/application/hooks";
 const { Row, Column, Box } = Grid;
-const DateFilters = ({ states, methods }) => {
+function DateFilters({ states, methods, config }) {
+    // hooks
+    const { t } = useTranslation(String(config?.locale ?? "tr"));
     return Object.entries(states.dateFilters.get).map(([name, range], index) => {
         const isEqualsName = states.openName.get === name;
         const className = [];
@@ -46,7 +49,7 @@ const DateFilters = ({ states, methods }) => {
                                     ...prev,
                                     [name]: { from: null, to: null },
                                 }));
-                            } }, "Clear")))))));
+                            } }, t("KanbanBoard.Search.Button.Clear.Text"))))))));
     });
-};
+}
 export default memo(DateFilters);

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

@@ -1,5 +1,6 @@
-import React, { Dispatch, SetStateAction } from "react";
-interface IProps {
+import { Dispatch, JSX, SetStateAction } from "react";
+import { Config } from "../IProps";
+interface IProps<T extends object> {
     states: {
         selectFilters: {
             get: {
@@ -20,6 +21,7 @@ interface IProps {
     methods: {
         open: (name: string | null) => void;
     };
+    config?: Config<T>;
 }
-declare const SelectFilters: ({ states, methods }: IProps) => React.JSX.Element[];
-export default SelectFilters;
+declare const _default: <T extends object>(props: IProps<T>) => JSX.Element;
+export default _default;

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

@@ -1,11 +1,14 @@
-import React from "react";
+import React, { memo } 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";
+import { useTranslation } from "../../../../libs/core/application/hooks";
 const { Box } = Grid;
-const SelectFilters = ({ states, methods }) => {
+function SelectFilters({ states, methods, config }) {
+    // hooks
+    const { t } = useTranslation(String(config?.locale ?? "tr"));
     return Object.entries(states.selectFilters.get).map(([name, values], index) => {
         const isEqualsName = states.openName.get === name;
         const className = [];
@@ -34,7 +37,7 @@ const SelectFilters = ({ states, methods }) => {
                                 delete next[name];
                                 return next;
                             });
-                        } }, "Clear"))))));
+                        } }, t("KanbanBoard.Search.Button.Clear.Text")))))));
     });
-};
-export default SelectFilters;
+}
+export default memo(SelectFilters);

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

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction } from "react";
 import React from "react";
-interface IProps {
+import { Config } from "../IProps";
+interface IProps<T extends object> {
     states: {
         search: {
             get: string;
@@ -29,6 +30,7 @@ interface IProps {
             set: Dispatch<SetStateAction<Record<string, Set<string | null>>>>;
         };
     };
+    config?: Config<T>;
 }
-declare const Filter: ({ states }: IProps) => React.JSX.Element;
+declare function Filter<T extends object>({ states, config }: IProps<T>): React.JSX.Element;
 export default Filter;

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

@@ -4,13 +4,16 @@ import DateFilters from "./DateFilters";
 import SelectFilters from "./SelectFilters";
 import React from "react";
 import Input from "../../../form/input";
-const Filter = ({ states }) => {
+import { useTranslation } from "../../../../libs/core/application/hooks";
+function Filter({ states, config }) {
     // states
     const [openName, setOpenName] = useState(null);
+    // hooks
+    const { t } = useTranslation(String(config?.locale ?? "tr"));
     // 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(Input, { variant: "borderless", placeholder: t("KanbanBoard.Search.Input.Placeholder"), onChange: (event) => states.search.set(event.target.value.toLocaleLowerCase()) }),
         React.createElement("ul", null,
             React.createElement(DateFilters, { states: {
                     dateFilters: {
@@ -20,7 +23,7 @@ const Filter = ({ states }) => {
                     openName: { get: openName },
                 }, methods: {
                     open: handleOpen,
-                } }),
+                }, config: config }),
             React.createElement(SelectFilters, { states: {
                     selectFilters: {
                         get: states.selectFilters.get,
@@ -31,6 +34,6 @@ const Filter = ({ states }) => {
                         set: states.selectedFilters.set,
                     },
                     openName: { get: openName },
-                }, methods: { open: handleOpen } }))));
-};
+                }, methods: { open: handleOpen }, config: config }))));
+}
 export default Filter;

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

@@ -1,5 +1,5 @@
 import React from "react";
 import IProps from "./IProps";
 import "../../../assets/css/components/data-display/kanban-board/styles.css";
-declare const KanbanBoard: <T, TColumnProperties>({ trackBy, columns, onChange, config, }: IProps<T, TColumnProperties>) => React.JSX.Element;
+declare const KanbanBoard: <T extends object, TColumnProperties>({ trackBy, columns, onChange, config, }: IProps<T, TColumnProperties>) => React.JSX.Element;
 export default KanbanBoard;

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

@@ -7,6 +7,7 @@ import Filter from "./filter";
 const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
     // refs
     const _kanbanWrapper = useRef(null);
+    const _kanbanItems = useRef({});
     const _hoverItemIndex = useRef(null);
     const _scrollInterval = useRef(null);
     const _scrollAnimationFrame = useRef(null);
@@ -169,13 +170,23 @@ const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
             ...col,
             items: [...col.items],
         }));
+        let firstMatchedId = null;
         // 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)),
-            }));
+            nextData = nextData.map((col) => {
+                const filteredItems = col.items.filter((item) => {
+                    const isMatch = config.filter.search(item, q);
+                    if (isMatch && !firstMatchedId)
+                        firstMatchedId = trackBy(item);
+                    return isMatch;
+                });
+                return { ...col, items: filteredItems };
+            });
+        }
+        else {
+            if (config?.filter?.search)
+                config.filter.search({}, "");
         }
         // Select ve Date varsa...
         nextData = nextData.map((col) => ({
@@ -209,6 +220,26 @@ const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
             }),
         }));
         setData(nextData);
+        // Focus / Scroll Control
+        if (search?.trim() && firstMatchedId) {
+            const element = _kanbanItems.current[firstMatchedId];
+            const container = _kanbanWrapper.current;
+            if (element && container) {
+                const elementRect = element.getBoundingClientRect();
+                const containerRect = container.getBoundingClientRect();
+                // Senin hesaplaman: Mevcut scroll + elemanın container'a göre konumu - ofset değerlerin
+                const scrollLeft = container.scrollLeft + (elementRect.left - containerRect.left) - 17.5;
+                const scrollTop = container.scrollTop + (elementRect.top - containerRect.top) - 100;
+                container.scrollTo({
+                    left: scrollLeft,
+                    top: scrollTop,
+                    behavior: "smooth",
+                });
+            }
+        }
+        else if (!search?.trim() && _kanbanWrapper.current) {
+            _kanbanWrapper.current.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+        }
     }, [columns, search, selectedFilters, dateFilters]);
     return (React.createElement(React.Fragment, null,
         config?.filter && (React.createElement(Filter, { states: {
@@ -228,7 +259,7 @@ const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
                     get: selectedFilters,
                     set: setSelectedFilters,
                 },
-            } })),
+            }, config: config })),
         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 },
@@ -248,7 +279,11 @@ const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
             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) => {
+                            return (React.createElement("div", { key: dndIndex, ref: (el) => {
+                                    if (!el)
+                                        return;
+                                    _kanbanItems.current[trackBy(item)] = el;
+                                }, className: "item", onDragOver: (event) => {
                                     event.preventDefault();
                                     const rect = event.currentTarget.getBoundingClientRect();
                                     const mouseY = event.clientY;

package/dist/components/data-display/table/body/Editable.js

@@ -8,9 +8,9 @@ const Editable = function ({ c, item, trackByValue, onEditable, config }) {
     // variables
     const key = c.key;
     const itemValue = item[c.key];
-    const selectItem = c.editable?.options?.find((x) => x.value === itemValue);
+    const selectItem = c.editable?.(item)?.options?.find((x) => x.value === itemValue);
     const selectItems = Array.isArray(itemValue)
-        ? c.editable?.options?.filter((x) => itemValue.includes(x.value))
+        ? c.editable?.(item)?.options?.filter((x) => itemValue.includes(x.value))
         : [];
     const validation = config.validation;
     const _vText = validation?.errors?.[`${c.key}_${trackByValue}`];
@@ -18,39 +18,39 @@ const Editable = function ({ c, item, trackByValue, onEditable, config }) {
     const [_value, setValue] = useState(itemValue);
     // useEffects
     useEffect(() => setValue(itemValue), [item]);
-    switch (c.editable?.type) {
+    switch (c.editable?.(item)?.type) {
         case "string":
         case "number":
             return (React.createElement(Input, { variant: "borderless", value: _value, onChange: (event) => {
                     const { value } = event.target;
                     setValue(value);
-                    onEditable({ ...item, [key]: c.editable?.type === "number" ? Number(value) : value }, trackByValue, ExtractKey(c.key));
-                }, validation: { text: _vText }, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
+                    onEditable({ ...item, [key]: c.editable?.(item)?.type === "number" ? Number(value) : value }, trackByValue, ExtractKey(c.key));
+                }, validation: { text: _vText }, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
         case "decimal":
             return (React.createElement(Input.Decimal, { variant: "borderless", name: c.key, value: _value, onChange: (event) => {
                     const { value } = event.target;
                     setValue(value);
                     onEditable({ ...item, [key]: value }, trackByValue, ExtractKey(c.key));
-                }, validation: { text: _vText }, locale: config.locale, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
+                }, validation: { text: _vText }, locale: config.locale, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
         case "input-formatted-decimal":
             return (React.createElement(Input.FormattedDecimal, { variant: "borderless", name: c.key, value: _value, onChange: (event) => {
                     const { value } = event.target;
                     setValue(value);
                     onEditable({ ...item, [key]: value }, trackByValue, ExtractKey(c.key));
-                }, validation: { text: _vText }, locale: config.locale, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
+                }, validation: { text: _vText }, locale: config.locale, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
         case "date-picker":
             return (React.createElement(DatePicker, { variant: "borderless", value: _value, onChange: (value) => {
                     setValue(value);
                     onEditable({ ...item, [key]: value }, trackByValue, ExtractKey(c.key));
-                }, validation: { text: _vText }, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
+                }, validation: { text: _vText }, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
         case "single-select":
-            return (React.createElement(Select, { variant: "borderless", value: selectItem, options: c.editable.options, onClick: async () => await c.editable?.method?.(), onChange: (option) => {
+            return (React.createElement(Select, { variant: "borderless", value: selectItem, options: c.editable?.(item).options, onClick: async () => await c.editable?.(item)?.method?.(), onChange: (option) => {
                     onEditable({ ...item, [key]: option?.value }, trackByValue, ExtractKey(c.key));
-                }, validation: { text: _vText }, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
+                }, validation: { text: _vText }, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
         case "multiple-select":
-            return (React.createElement(Select, { variant: "borderless", value: selectItems, options: c.editable.options, onClick: async () => await c.editable?.method?.(), onChange: (options) => {
+            return (React.createElement(Select, { variant: "borderless", value: selectItems, options: c.editable?.(item).options, onClick: async () => await c.editable?.(item)?.method?.(), onChange: (options) => {
                     onEditable({ ...item, [key]: options.map((option) => option.value) }, trackByValue, ExtractKey(c.key));
-                }, validation: { text: _vText }, multiple: true, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
+                }, validation: { text: _vText }, multiple: true, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
         default:
             return null;
     }

package/dist/libs/core/application/hooks/useTranslation.d.ts

@@ -1,8 +1,9 @@
 import { INotificationLocale } from "../locales";
+import IKanbanBoardLocale from "../locales/kanban-board/IKanbanBoardLocale";
 import ITableLocale from "../locales/table/ITableLocale";
 type LocaleMap = Record<string, Record<string, any>>;
 declare const useTranslation: <TBaseLocale>(currentLanguage: string | undefined, translations?: LocaleMap) => {
-    t: (key: Extract<keyof TBaseLocale | keyof ITableLocale | keyof INotificationLocale, string>, ...args: any[]) => string;
+    t: (key: Extract<keyof TBaseLocale | keyof ITableLocale | keyof IKanbanBoardLocale | keyof INotificationLocale, string>, ...args: any[]) => string;
     currentLanguage: string | undefined;
 };
 export default useTranslation;

package/dist/libs/core/application/hooks/useTranslation.js

@@ -1,12 +1,14 @@
 import Utils from "../../../infrastructure/shared/Utils";
 import { NotificationEN, NotificationTR } from "../locales";
+import KanbanBoardEN from "../locales/kanban-board/en";
+import KanbanBoardTR from "../locales/kanban-board/tr";
 import TableEN from "../locales/table/en";
 import TableTR from "../locales/table/tr";
 const useTranslation = function (currentLanguage, translations = {}) {
     const merged = {};
     const ExtraLocales = {
-        tr: { ...TableTR, ...NotificationTR },
-        en: { ...TableEN, ...NotificationEN },
+        tr: { ...TableTR, ...KanbanBoardTR, ...NotificationTR },
+        en: { ...TableEN, ...KanbanBoardEN, ...NotificationEN },
     };
     const allLanguages = new Set([...Object.keys(translations), ...Object.keys(ExtraLocales)]);
     allLanguages.forEach((lang) => {

package/dist/libs/core/application/locales/kanban-board/IKanbanBoardLocale.d.ts

@@ -0,0 +1,5 @@
+interface IKanbanBoardLocale {
+    "KanbanBoard.Search.Input.Placeholder": string;
+    "KanbanBoard.Search.Button.Clear.Text": string;
+}
+export default IKanbanBoardLocale;

package/dist/libs/core/application/locales/kanban-board/IKanbanBoardLocale.js

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

package/dist/libs/core/application/locales/kanban-board/en.d.ts

@@ -0,0 +1,3 @@
+import IKanbanBoardLocale from "./IKanbanBoardLocale";
+declare const KanbanBoardEN: IKanbanBoardLocale;
+export default KanbanBoardEN;

package/dist/libs/core/application/locales/kanban-board/en.js

@@ -0,0 +1,5 @@
+const KanbanBoardEN = {
+    "KanbanBoard.Search.Input.Placeholder": "Filter by keyword",
+    "KanbanBoard.Search.Button.Clear.Text": "Clear",
+};
+export default KanbanBoardEN;

package/dist/libs/core/application/locales/kanban-board/tr.d.ts

@@ -0,0 +1,3 @@
+import IKanbanBoardLocale from "./IKanbanBoardLocale";
+declare const KanbanBoardTR: IKanbanBoardLocale;
+export default KanbanBoardTR;

package/dist/libs/core/application/locales/kanban-board/tr.js

@@ -0,0 +1,5 @@
+const KanbanBoardTR = {
+    "KanbanBoard.Search.Input.Placeholder": "Anahtar kelimeye göre filtrele",
+    "KanbanBoard.Search.Button.Clear.Text": "Temizle",
+};
+export default KanbanBoardTR;

package/dist/libs/types/index.d.ts

@@ -35,11 +35,11 @@ export type TableColumnType<T> = {
     filters?: Option[];
     filterDataType?: FilterDataType;
     render?: (item: T) => React.ReactNode;
-    editable?: {
+    editable?: (item: T) => {
         type: "string" | "number" | "decimal" | "input-formatted-decimal" | "date-picker" | "single-select" | "multiple-select";
         options?: Option[];
         method?: () => void | Promise<void>;
-        where?: (item: T) => boolean;
+        where?: boolean;
     };
     config?: {
         width?: number | "auto" | "fit-content" | "max-content" | "min-content";

package/package.json

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