ar-design 0.4.24 → 0.4.26

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

@@ -21,6 +21,7 @@ export type SearchedParam = {
     [key: string]: FilterValue | FilterValue[];
 };
 export type Config<T> = {
+    locale?: string;
     isServerSide?: boolean;
     isProperties?: boolean;
     isSearchable?: boolean;

package/dist/components/data-display/table/body/Editable.d.ts

@@ -1,11 +1,13 @@
 import React from "react";
 import { Errors, TableColumnType } from "../../../../libs/types";
+import { Config } from "../IProps";
 interface IProps<T> {
     c: TableColumnType<T>;
     item: T;
     trackByValue: string;
     onEditable: (item: T, trackByValue: string) => void;
     validation?: Errors<T>;
+    config: Config<T>;
 }
-declare const Editable: <T>({ c, item, trackByValue, onEditable, validation }: IProps<T>) => React.JSX.Element | null;
+declare const Editable: <T>({ c, item, trackByValue, onEditable, validation, config }: IProps<T>) => React.JSX.Element | null;
 export default Editable;

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

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import Input from "../../../form/input";
 import DatePicker from "../../../form/date-picker";
 import Select from "../../../form/select";
-const Editable = function ({ c, item, trackByValue, onEditable, validation }) {
+const Editable = function ({ c, item, trackByValue, onEditable, validation, config }) {
     // variables
     const key = c.key;
     const itemValue = item[c.key];
@@ -29,13 +29,13 @@ const Editable = function ({ c, item, trackByValue, onEditable, validation }) {
                     const { value } = event.target;
                     setValue(value);
                     onEditable({ ...item, [key]: value }, trackByValue);
-                }, validation: { text: _vText } }));
+                }, validation: { text: _vText }, locale: config.locale }));
         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);
-                }, validation: { text: _vText } }));
+                }, validation: { text: _vText }, locale: config.locale }));
         case "date-picker":
             return (React.createElement(DatePicker, { variant: "borderless", value: _value, onChange: (value) => {
                     setValue(value);

package/dist/components/data-display/table/body/TBody.d.ts

@@ -1,15 +1,23 @@
-import React from "react";
+import React, { Dispatch, SetStateAction } from "react";
 import { TableColumnType } from "../../../../libs/types";
 import { Config } from "../IProps";
 interface IProps<T> {
     data: T[];
     columns: TableColumnType<T>[];
+    refs: {
+        _checkboxItems: React.MutableRefObject<(HTMLInputElement | null)[]>;
+        _selectionItems: React.MutableRefObject<T[]>;
+    };
     states: {
+        setSelectAll: {
+            get: boolean;
+            set: Dispatch<SetStateAction<boolean>>;
+        };
         showSubitems: {
             get: {
                 [key: string]: boolean;
             };
-            set: React.Dispatch<React.SetStateAction<{
+            set: Dispatch<React.SetStateAction<{
                 [key: string]: boolean;
             }>>;
         };
@@ -23,6 +31,6 @@ interface IProps<T> {
     };
     config: Config<T>;
 }
-declare function TBody<T extends object>({ data, columns, methods, states, config }: IProps<T>): React.JSX.Element | React.JSX.Element[];
+declare function TBody<T extends object>({ data, columns, refs, methods, states, config }: IProps<T>): React.JSX.Element | React.JSX.Element[];
 declare const _default: typeof TBody;
 export default _default;

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

@@ -2,14 +2,12 @@ import React, { Fragment, memo, useEffect, useRef, useState } from "react";
 import { ARIcon } from "../../../icons";
 import Checkbox from "../../../form/checkbox";
 import Editable from "./Editable";
-function TBody({ data, columns, methods, states, config }) {
+function TBody({ data, columns, refs, methods, states, config }) {
     // refs
+    const _hasMeasured = useRef(false);
     const _tBodyTR = useRef([]);
-    const _checkboxItems = useRef([]);
-    // refs -> Selection
-    const _selectionItems = useRef([]);
     // states
-    const [_, setTriggerForRender] = useState(false);
+    const [triggerForRender, setTriggerForRender] = useState(false);
     const [rowHeights, setRowHeights] = useState([]);
     // variables
     const _subrowSelector = config.subrow?.selector ?? "subitems";
@@ -22,17 +20,17 @@ function TBody({ data, columns, methods, states, config }) {
                     _tBodyTR.current[index] = element;
                 }, ...(methods.rowBackgroundColor ? { style: { backgroundColor: methods.rowBackgroundColor(item) } } : {}), ...(methods.onDnD && data.length > 1 ? { className: "draggable", draggable: true } : {}) },
                 methods.selections && (React.createElement("td", { className: "flex justify-content-center sticky-left", "data-sticky-position": "left" },
-                    React.createElement(Checkbox, { key: Date.now(), ref: (element) => (_checkboxItems.current[index] = element), variant: "filled", color: "green", checked: _selectionItems.current.some((selectionItem) => methods.trackBy?.(selectionItem) === methods.trackBy?.(item)), onChange: (event) => {
+                    React.createElement(Checkbox, { key: Date.now(), ref: (element) => (refs._checkboxItems.current[index] = element), variant: "filled", color: "green", checked: refs._selectionItems.current.some((selectionItem) => methods.trackBy?.(selectionItem) === methods.trackBy?.(item)), onChange: (event) => {
                             const key = methods.trackBy?.(item);
                             if (event.target.checked) {
-                                if (!_selectionItems.current.some((_item) => methods.trackBy?.(_item) === key)) {
-                                    _selectionItems.current = [..._selectionItems.current, item];
+                                if (!refs._selectionItems.current.some((_item) => methods.trackBy?.(_item) === key)) {
+                                    refs._selectionItems.current = [...refs._selectionItems.current, item];
                                 }
                             }
                             else {
-                                _selectionItems.current = _selectionItems.current.filter((_item) => methods.trackBy?.(_item) !== key);
+                                refs._selectionItems.current = refs._selectionItems.current.filter((_item) => methods.trackBy?.(_item) !== key);
                             }
-                            methods.selections?.(_selectionItems.current);
+                            methods.selections?.(refs._selectionItems.current);
                             setTriggerForRender((prev) => !prev);
                         } }))),
                 isHasSubitems && _subrowButton ? (React.createElement("td", null, item[_subrowSelector] && (React.createElement("div", { className: "subitem-open-button-wrapper" },
@@ -91,7 +89,7 @@ function TBody({ data, columns, methods, states, config }) {
                             return (React.createElement("div", { key: `last-before-${i}`, style: { left: `${i + 0.65}rem` }, className: "last-before" }));
                         }),
                     React.createElement("div", { className: "before" }))),
-                React.isValidElement(render) ? (render) : column.editable && methods.onEditable ? (React.createElement(Editable, { c: column, item: item, trackByValue: methods.trackBy?.(item) ?? "", onEditable: methods.onEditable, validation: config.validation })) : (React.createElement("span", null, render)),
+                React.isValidElement(render) ? (render) : column.editable && methods.onEditable ? (React.createElement(Editable, { c: column, item: item, trackByValue: methods.trackBy?.(item) ?? "", onEditable: methods.onEditable, validation: config.validation, config: config })) : (React.createElement("span", null, render)),
                 config.isTreeView && cIndex === 0 && (React.createElement("div", { className: "after" },
                     React.createElement("div", { className: "circle" }))))));
     };
@@ -131,9 +129,21 @@ function TBody({ data, columns, methods, states, config }) {
     };
     // useEffects
     useEffect(() => {
+        if (_hasMeasured.current)
+            return;
+        if (!data || data.length === 0)
+            return;
         const heights = _tBodyTR.current.map((el) => (el ? el.getBoundingClientRect().height : 0));
         setRowHeights(heights);
+        setTriggerForRender((prev) => !prev);
+        _hasMeasured.current = true;
     }, [data]);
+    useEffect(() => {
+        if (Array.isArray(refs._checkboxItems.current) && refs._checkboxItems.current.length > 0) {
+            const allChecked = refs._checkboxItems.current.every((item) => item?.checked === true);
+            states.setSelectAll.set(allChecked);
+        }
+    }, [triggerForRender]);
     return data.length > 0 ? (data.map((item, index) => React.createElement(React.Fragment, { key: index }, renderRow(item, index, 1)))) : (React.createElement("tr", null,
         React.createElement("td", { colSpan: columns.length || 1 },
             React.createElement("div", { className: "no-item" },

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

@@ -383,7 +383,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             _data = _data.slice(indexOfFirstRow, indexOfLastRow);
         }
         return _data;
-    }, [data, searchedText, currentPage, selectedPerPage, sortConfig]);
+    }, [data, searchedText, currentPage, selectedPerPage, sortConfig, config.isServerSide]);
     // useEffects
     useEffect(() => {
         if (!previousSelections || previousSelections.length === 0) {
@@ -656,7 +656,10 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                                         } }))))));
                         })))),
                 React.createElement("tbody", { ref: _tBody },
-                    React.createElement(TBody, { data: getData, columns: columns, states: { showSubitems: { get: showSubitems, set: setShowSubitems } }, methods: {
+                    React.createElement(TBody, { data: getData, columns: columns, refs: { _checkboxItems: _checkboxItems, _selectionItems: _selectionItems }, states: {
+                            setSelectAll: { get: selectAll, set: setSelectAll },
+                            showSubitems: { get: showSubitems, set: setShowSubitems },
+                        }, methods: {
                             trackBy: trackBy,
                             selections: selections,
                             onDnD: onDnD,

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

@@ -251,10 +251,8 @@ const DatePicker = ({ variant, color, onChange, config, validation, ...attribute
         attributes.placeholder && attributes.placeholder.length > 0 && (React.createElement("label", { ref: _placeholder },
             validation ? "* " : "",
             attributes.placeholder)),
-        React.createElement("div", { className: "wrapper", ...(String(attributes.value).length > 0
-                ? {
-                    style: {
-                        clipPath: `polygon(
+        React.createElement("div", { className: "wrapper", style: {
+                clipPath: `polygon(
                             -15px 0,
                             10px -5px,
                             10px 5px,
@@ -264,9 +262,7 @@ const DatePicker = ({ variant, color, onChange, config, validation, ...attribute
                             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();

package/dist/components/form/input/decimal/Decimal.js

@@ -1,38 +1,50 @@
 "use client";
-import React, { useRef, useState, useEffect } from "react";
+import React, { useRef, useState, useEffect, useMemo } from "react";
 import Input from "..";
-const Decimal = ({ variant, color, name, value, onChange, placeholder, validation, disabled }) => {
-    // refs
+const Decimal = ({ variant, color, name, value, onChange, placeholder, validation, disabled, locale = "tr-TR", }) => {
     const _input = useRef(null);
-    // states
     const [_value, setValue] = useState("");
     // methods
+    const decimalSeparator = useMemo(() => {
+        const parts = new Intl.NumberFormat(locale).formatToParts(1.1);
+        return parts.find((p) => p.type === "decimal")?.value ?? ".";
+    }, [locale]);
     const handleChange = (event) => {
         let inputValue = event.target.value;
-        inputValue = inputValue.replace(/[^0-9.]/g, "");
-        const parts = inputValue.split(".");
+        // Locale’a göre izin verilen karakterler. (rakam, decimal, -)
+        const regex = new RegExp(`[^0-9\\${decimalSeparator}-]`, "g");
+        inputValue = inputValue.replace(regex, "");
+        // Sadece başta negatif işarete izin ver.
+        if (inputValue.includes("-")) {
+            inputValue = (inputValue.startsWith("-") ? "-" : "") + inputValue.replace(/-/g, "");
+        }
+        // Tek decimal separator’a izin ver.
+        const parts = inputValue.split(decimalSeparator);
         if (parts.length > 2) {
-            inputValue = parts[0] + "." + parts.slice(1).join("");
+            inputValue = parts[0] + decimalSeparator + parts.slice(1).join("");
         }
         setValue(inputValue);
+        // Parent’a normalize edilmiş "." decimal gönder.
+        const normalized = inputValue.replace(decimalSeparator, ".");
         onChange?.({
             ...event,
             target: {
                 ...event.target,
                 name,
-                value: inputValue,
+                value: normalized,
             },
         });
     };
     // useEffects
     useEffect(() => {
-        if (value === undefined || value === null) {
+        if (value === undefined || value === null || value === "") {
             setValue("");
+            return;
         }
-        else {
-            setValue(String(value));
-        }
-    }, [value]);
+        const stringValue = String(value);
+        const localized = stringValue.replace(".", decimalSeparator);
+        setValue(localized);
+    }, [value, decimalSeparator]);
     return (React.createElement(Input, { ref: _input, name: name, variant: variant, color: color, type: "text", inputMode: "decimal", value: _value, onChange: (e) => {
             if (disabled)
                 return;

package/dist/components/form/input/decimal/IProps.d.ts

@@ -3,5 +3,6 @@ interface IProps extends IVariant, IColors, IBorder, IUpperCase, IValidation, IP
     name: string;
     value: string | number | readonly string[] | undefined;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    locale?: Intl.LocalesArgument;
 }
 export default IProps;

package/dist/components/form/input/formatted-decimal/FormattedDecimal.js

@@ -3,12 +3,16 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import Input from "..";
 import { NUMBER } from "../../../../libs/infrastructure/shared";
 const FormattedDecimal = ({ variant, color, name, value, onChange, locale = "tr-TR", digits, placeholder, validation, disabled, }) => {
-    // refs
-    // const _firstLoad = useRef<boolean>(false);
     const _input = useRef(null);
-    // states
     const [_value, setValue] = useState("");
     // methods
+    const getSeparators = (locale) => {
+        const parts = new Intl.NumberFormat(locale).formatToParts(1000.1);
+        const group = parts.find((p) => p.type === "group")?.value ?? ",";
+        const decimal = parts.find((p) => p.type === "decimal")?.value ?? ".";
+        return { group, decimal };
+    };
+    const getFormatter = useMemo(() => NUMBER.Decimal(locale, digits), [locale, digits]);
     const handleClick = () => {
         const input = _input.current;
         if (!input)
@@ -33,48 +37,34 @@ const FormattedDecimal = ({ variant, color, name, value, onChange, locale = "tr-
     };
     const handleChange = (event) => {
         let { value } = event.target;
-        // Temizle.
-        const cleanedValue = (value = value.replace(/[^0-9,]/g, ""));
-        // Numara olarak çevir.
-        const normalized = parseCurrencySmart(value);
-        // const isDecimals = cleanedValue.includes(",");
-        const parsedDecimal = parseFloat(normalized);
-        const newValue = isNaN(parsedDecimal) ? 0 : parsedDecimal;
-        // Formatla ve Kullanıcı , (virgül) girdiyse kuruş göster.
-        let formatted = newValue === 0 && cleanedValue === "" ? "" : getFormatter.format(newValue);
+        const { group, decimal } = getSeparators(locale);
+        // Locale’a göre izin verilen karakterleri temizle.
+        const regex = new RegExp(`[^0-9\\${group}\\${decimal}]`, "g");
+        value = value.replace(regex, "");
+        // Normalize et (decimal her zaman "." olacak şekilde)
+        let normalized = value.replace(new RegExp(`\\${group}`, "g"), "").replace(decimal, ".");
+        const parsed = parseFloat(normalized);
+        const numericValue = isNaN(parsed) ? 0 : parsed;
+        const formatted = value === "" ? "" : getFormatter.format(numericValue);
         setValue(formatted);
-        onChange?.({ ...event, target: { ...event.target, name: name, value: normalized } });
-    };
-    const getFormatter = useMemo(() => NUMBER.Decimal(locale, digits), [digits]);
-    const parseCurrencySmart = (input) => {
-        if (input.includes(",") && input.includes(".")) {
-            // Nokta binlik, virgül ondalık (tr-TR, de-DE gibi)
-            return input.replace(/\./g, "").replace(",", ".");
-        }
-        else if (input.includes(",") && !input.includes(".")) {
-            // Virgül ondalık, binlik yok (fr-FR gibi)
-            return input.replace(",", ".");
-        }
-        else if (input.includes(".") && !input.includes(",")) {
-            // Nokta ondalık, binlik yok veya US format
-            return input.replace(/,/g, "");
-        }
-        else {
-            // Hiçbiri yok, zaten sayı
-            return input;
-        }
+        onChange?.({
+            ...event,
+            target: {
+                ...event.target,
+                name,
+                value: normalized,
+            },
+        });
     };
     // useEffects
     useEffect(() => {
-        // if (!_firstLoad.current && value !== undefined && value !== "") {
-        //   // const isDecimals = String(value).includes(".");
-        //   setValue(getFormatter.format(Number(value)));
-        //   _firstLoad.current = true;
-        // }
+        if (value === undefined || value === null || value === "") {
+            setValue("");
+            return;
+        }
         setValue(getFormatter.format(Number(value)));
-    }, [value]);
-    return (React.createElement(Input, { ref: _input, name: name, variant: variant, color: color, value: _value ?? "", type: "text", inputMode: "decimal", onChange: (event) => {
-            // Disabled gelmesi durumunda işlem yapmasına izin verme...
+    }, [value, getFormatter]);
+    return (React.createElement(Input, { ref: _input, name: name, variant: variant, color: color, value: _value, type: "text", inputMode: "decimal", onChange: (event) => {
             if (disabled)
                 return;
             handleChange(event);

package/package.json

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