ar-design 0.4.38 → 0.4.40

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

@@ -6,7 +6,7 @@ let _fromColumn = undefined;
 const DnD = function ({ data, renderItem, columnKey, onChange, confing = { isMoveIcon: true } }) {
     // refs
     const _arDnD = useRef(null);
-    const _dragItem = useRef();
+    const _dragItem = useRef(null);
     // useEffects
     useEffect(() => {
         if (!_arDnD.current || data.length === 0)

package/dist/components/data-display/grid-system/index.d.ts

@@ -1,7 +1,7 @@
 import "../../../assets/css/components/data-display/grid-system/styles.css";
 declare const Grid: {
     Box: import("react").FC<{
-        children: import("react").ReactNode;
+        children: React.ReactNode;
         direction?: "flex-start" | "center" | "flex-end";
     }>;
     Row: import("react").FC<import("./row/IProps").default>;

package/dist/components/data-display/syntax-highlighter/classes/Parser.js

@@ -11,12 +11,13 @@ class Parser {
     JsxToString = (child, subChilde = false, indentLevel = 0) => {
         if (!React.isValidElement(child))
             return;
+        const element = child;
         let componentName = "";
-        let componentContent = child.props.children;
-        if (typeof child.type === "string")
-            componentName = child.type;
+        let componentContent = element.props.children;
+        if (typeof element.type === "string")
+            componentName = element.type;
         else {
-            const componentType = child.type;
+            const componentType = element.type;
             componentName = componentType.displayName || componentType.name || "Unknown";
         }
         // Indent seviyesi için boşlukları ekle.
@@ -24,11 +25,9 @@ class Parser {
         // Eğer `br` elementi ise işlemi sonlandır
         if (componentName === "br")
             return;
-        const attributes = Object.keys(child.props).filter((key) => key !== "children");
+        const attributes = Object.keys(element.props).filter((key) => key !== "children");
         const attributesLength = attributes.length;
-        const attributesList = attributes
-            .map((key) => this.FormatAttributeValue(key, child.props[key]))
-            .join(" ");
+        const attributesList = attributes.map((key) => this.FormatAttributeValue(key, element.props[key])).join(" ");
         const formattedTag = componentName[0]
             ? componentName[0].toUpperCase() === componentName[0]
                 ? `[react-tag]${componentName}[/react-tag]`
@@ -53,7 +52,7 @@ class Parser {
         // componentContent =
         //   attributesLength >= this._lineBreakSpaces ? `\n  ${componentContent}\n` : componentContent;
         const renderElement = componentContent != undefined
-            ? `${indent}[open]<[/open][tag]${formattedTag}[/tag]${formattedAttributes}[close]>[/close]${componentContent}${typeof child.props["children"] === "object" ? indent : ""}[open]</[/open][tag]${formattedTag}[/tag][close]>[/close]`
+            ? `${indent}[open]<[/open][tag]${formattedTag}[/tag]${formattedAttributes}[close]>[/close]${componentContent}${typeof element.props["children"] === "object" ? indent : ""}[open]</[/open][tag]${formattedTag}[/tag][close]>[/close]`
             : `${indent}[open]<[/open][tag]${formattedTag}[/tag]${formattedAttributes} [close]/>[/close]`;
         !subChilde && this._setElements((prevElements) => [...prevElements, renderElement]);
         return renderElement;
@@ -68,9 +67,7 @@ class Parser {
                 .map(([key, value]) => `[attribute-key]${key}[/attribute-key][colon]:[/colon] ${this.HandleEntries(value)}`)
                 .join(", ")} [/curly-bracket]`;
         }
-        return typeof propValue === "number"
-            ? `[number]${propValue}[/number]`
-            : `[string]${propValue}[/string]`;
+        return typeof propValue === "number" ? `[number]${propValue}[/number]` : `[string]${propValue}[/string]`;
     };
     FormatAttributeValue = (key, value) => {
         let result = "";

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

@@ -4,7 +4,6 @@ import ReactDOM from "react-dom";
 const FilterPopup = ({ children, refs, states, coordinate }) => {
     // refs
     const _arTableFilterPopup = useRef(null);
-    // hooks
     // methods
     const handleClickOutSide = (event) => {
         const target = event.target;

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

@@ -82,7 +82,7 @@ interface IProps<T> extends IChildren {
     previousSelections?: T[];
     sortedParams?: (params: Sort<T>[], query: string) => void;
     searchedParams?: (params: SearchedParam | null, query: string, operator: FilterOperator) => void;
-    onEditable?: (item: T, trackByValue: string) => void;
+    onEditable?: (item: T, trackByValue: string, currentKey?: keyof T | null) => void;
     onDnD?: (item: T[]) => void;
     pagination?: {
         totalRecords: number;

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

@@ -30,7 +30,11 @@ const MemoizedTHeadCell = function ({ refs, states, methods, columns, config, })
                         _direction === "asc" && React.createElement(ARIcon, { icon: "ArrowUp" }),
                         _direction === "desc" && React.createElement(ARIcon, { icon: "ArrowDown" }))),
                     c.title),
-                config.isProperties && isProperties && (React.createElement("span", { ref: (element) => (refs.propertiesButton.current[cIndex] = element), className: "properties-field", "data-properties-button": "true", onClick: (event) => {
+                config.isProperties && isProperties && (React.createElement("span", { ref: (element) => {
+                        if (!element)
+                            return;
+                        refs.propertiesButton.current[cIndex] = element;
+                    }, className: "properties-field", "data-properties-button": "true", onClick: (event) => {
                         event.preventDefault();
                         event.stopPropagation();
                         const rect = event.currentTarget.getBoundingClientRect();

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

@@ -5,7 +5,7 @@ interface IProps<T> {
     c: TableColumnType<T>;
     item: T;
     trackByValue: string;
-    onEditable: (item: T, trackByValue: string) => void;
+    onEditable: (item: T, trackByValue: string, currentKey?: keyof T | null) => void;
     validation?: Errors<T>;
     config: Config<T>;
 }

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

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import Input from "../../../form/input";
 import DatePicker from "../../../form/date-picker";
 import Select from "../../../form/select";
+import { ExtractKey } from "../Helpers";
 const Editable = function ({ c, item, trackByValue, onEditable, validation, config }) {
     // variables
     const key = c.key;
@@ -22,32 +23,32 @@ const Editable = function ({ c, item, trackByValue, onEditable, validation, conf
             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);
+                    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) } : {}) }));
         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);
+                    onEditable({ ...item, [key]: value }, trackByValue, ExtractKey(c.key));
                 }, validation: { text: _vText }, locale: config.locale, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
         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);
+                    onEditable({ ...item, [key]: value }, trackByValue, ExtractKey(c.key));
                 }, validation: { text: _vText }, locale: config.locale, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
         case "date-picker":
             return (React.createElement(DatePicker, { variant: "borderless", value: _value, onChange: (value) => {
                     setValue(value);
-                    onEditable({ ...item, [key]: value }, trackByValue);
+                    onEditable({ ...item, [key]: value }, trackByValue, ExtractKey(c.key));
                 }, validation: { text: _vText }, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
         case "single-select":
             return (React.createElement(Select, { variant: "borderless", value: selectItem, options: c.editable.options, onClick: async () => await c.editable?.method?.(), onChange: (option) => {
-                    onEditable({ ...item, [key]: option?.value }, trackByValue);
+                    onEditable({ ...item, [key]: option?.value }, trackByValue, ExtractKey(c.key));
                 }, validation: { text: _vText }, ...(c.editable.where ? { disabled: c.editable.where(item) } : {}) }));
         case "multiple-select":
             return (React.createElement(Select, { variant: "borderless", value: selectItems, options: c.editable.options, onClick: async () => await c.editable?.method?.(), onChange: (options) => {
-                    onEditable({ ...item, [key]: options.map((option) => option.value) }, trackByValue);
+                    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) } : {}) }));
         default:
             return null;

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

@@ -26,7 +26,7 @@ interface IProps<T> {
         trackBy?: (item: T) => string;
         selections?: (selectionItems: T[]) => void;
         onDnD?: (item: T[]) => void;
-        onEditable?: (item: T, trackByValue: string) => void;
+        onEditable?: (item: T, trackByValue: string, currentKey?: keyof T | null) => void;
         rowBackgroundColor?: (item: T) => string;
     };
     config: Config<T>;

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

@@ -2,6 +2,7 @@ import React, { Fragment, memo, useEffect, useRef, useState } from "react";
 import { ARIcon } from "../../../icons";
 import Checkbox from "../../../form/checkbox";
 import Editable from "./Editable";
+import { useTranslation } from "../../../../libs/core/application/hooks";
 function TBody({ data, columns, refs, methods, states, config }) {
     // refs
     const _hasMeasured = useRef(false);
@@ -13,6 +14,8 @@ function TBody({ data, columns, refs, methods, states, config }) {
     // variables
     const _subrowSelector = config.subrow?.selector ?? "subitems";
     const _subrowButton = config.subrow?.button ?? true;
+    // hooks
+    const { t } = useTranslation(String(config.locale ?? "tr"));
     // methods
     const renderRow = (item, index, deph) => {
         const isHasSubitems = _subrowSelector in item;
@@ -23,7 +26,11 @@ function TBody({ data, columns, refs, methods, states, config }) {
                 methods.selections && (React.createElement("td", { ref: (element) => {
                         _tHeadTH.current[index] = element;
                     }, className: "flex justify-content-center sticky-left", style: { display: "flex", alignItems: "center", height: rowHeights[index] ?? 0 }, "data-sticky-position": "left" },
-                    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) => {
+                    React.createElement(Checkbox, { key: Date.now(), ref: (element) => {
+                            if (!element)
+                                return;
+                            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 (!refs._selectionItems.current.some((_item) => methods.trackBy?.(_item) === key)) {
@@ -151,6 +158,6 @@ function TBody({ data, columns, refs, methods, states, config }) {
         React.createElement("td", { colSpan: columns.length || 1 },
             React.createElement("div", { className: "no-item" },
                 React.createElement(ARIcon, { icon: "Inbox-Fill", fill: "var(--gray-300)", size: 64, style: { position: "relative", zIndex: 1 } }),
-                React.createElement("span", null, "No Data")))));
+                React.createElement("span", null, t("Table.Body.NoData.Text"))))));
 }
 export default memo(TBody);

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

@@ -3,5 +3,5 @@ import IProps from "./IProps";
 import React from "react";
 declare const _default: <T extends object>(props: IProps<T> & {
     ref?: React.Ref<HTMLTableElement>;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default _default;

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

@@ -27,7 +27,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
     const _tableWrapper = useRef(null);
     const _tableContent = useRef(null);
     const _tBody = useRef(null);
-    const _dragItem = useRef();
+    const _dragItem = useRef(null);
     const _checkboxItems = useRef([]);
     const _filterCheckboxItems = useRef([]);
     // refs -> Search
@@ -241,7 +241,11 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                             ?.map((filter, fIndex) => {
                             const name = typeof c.key !== "object" ? String(c.key) : String(c.key.field);
                             return (React.createElement("div", null,
-                                React.createElement(Checkbox, { ref: (element) => (_filterCheckboxItems.current[fIndex] = element), variant: "filled", color: "green", label: filter.text, name: name, value: filter.value, checked: Array.isArray(checkboxSelectedParams?.[name]) &&
+                                React.createElement(Checkbox, { ref: (element) => {
+                                        if (!element)
+                                            return;
+                                        _filterCheckboxItems.current[fIndex] = element;
+                                    }, variant: "filled", color: "green", label: filter.text, name: name, value: filter.value, checked: Array.isArray(checkboxSelectedParams?.[name]) &&
                                         checkboxSelectedParams?.[name]?.some((f) => String(f.value) === String(filter.value)), onChange: async (event) => await handleCheckboxChange(event) })));
                         }))));
                 default:
@@ -629,10 +633,18 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                                 }) }, c.key && (React.createElement("div", { className: "filter-field" }, c.filterDataType === "date" ? (React.createElement(DatePicker, { value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onClick: () => {
                                     handleScroll();
                                 }, onChange: (value) => handleSearch(key, value, c.filterDataType), style: { height: "2rem" }, config: { isClock: true, isFooterButton: true, locale: config.locale }, disabled: !c.key || !!c.filters })) : (React.createElement(React.Fragment, null,
-                                React.createElement(Input, { ref: (element) => (_searchTextInputs.current[cIndex] = element), variant: c.key && !c.filters ? "outlined" : "filled", style: { height: "2rem" }, value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onClick: () => {
+                                React.createElement(Input, { ref: (element) => {
+                                        if (!element)
+                                            return;
+                                        _searchTextInputs.current[cIndex] = element;
+                                    }, variant: c.key && !c.filters ? "outlined" : "filled", style: { height: "2rem" }, value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onClick: () => {
                                         handleScroll();
                                     }, onInput: (event) => handleSearch(event.currentTarget.name, event.currentTarget.value), disabled: !c.key || !!c.filters }),
-                                React.createElement("span", { ref: (element) => (_filterButton.current[cIndex] = element), onClick: (event) => {
+                                React.createElement("span", { ref: (element) => {
+                                        if (!element)
+                                            return;
+                                        _filterButton.current[cIndex] = element;
+                                    }, onClick: (event) => {
                                         event.preventDefault();
                                         event.stopPropagation();
                                         // Temizlik...

package/dist/components/feedback/drawer/index.js

@@ -65,7 +65,7 @@ const Drawer = function ({ title, tabs = [], activeTab, open, validation, onChan
             title && (React.createElement("div", { className: "header" },
                 React.createElement(Title, { Level: "h3" }, title),
                 React.createElement("div", { className: "close", onClick: () => handleValidationControlForClose() }))),
-            React.createElement("div", { className: "tabs" }, tabs.length > 0 &&
+            React.createElement("div", { className: "tabs" }, tabs.length > 1 &&
                 tabs.map((tab, index) => {
                     let className = ["item"];
                     if (currentTab === index)

package/dist/components/feedback/notification/index.js

@@ -66,7 +66,11 @@ const Notification = ({ title, message, status, direction = "bottom-left", trigg
     };
     return items.map((item, index) => {
         const bottom = getBottomPosition(index);
-        return (React.createElement("div", { key: item.id, ref: (element) => (_notificationItems.current[index] = element), className: "ar-notification-item", style: items.length > 5
+        return (React.createElement("div", { key: item.id, ref: (element) => {
+                if (!element)
+                    return;
+                _notificationItems.current[index] = element;
+            }, className: "ar-notification-item", style: items.length > 5
                 ? {
                     backgroundColor: `rgba(var(--white-rgb), ${index === items.length - 1 ? 1 : 0.1})`,
                     backdropFilter: "blur(10px)",

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

@@ -193,7 +193,11 @@ const DatePicker = ({ variant, color, onChange, config, validation, ...attribute
     }, [dateChanged, calendarIsOpen]);
     useEffect(() => {
         const generateList = (count, current, setFunc) => {
-            const items = Array.from({ length: count }, (_, i) => (React.createElement("li", { ref: (element) => count === 24 ? (_hoursLiElements.current[i] = element) : (_minutesLiElements.current[i] = element), key: i, ...(current === i ? { className: "selection-time" } : {}), onClick: () => {
+            const items = Array.from({ length: count }, (_, i) => (React.createElement("li", { ref: (element) => {
+                    if (!element)
+                        return;
+                    count === 24 ? (_hoursLiElements.current[i] = element) : (_minutesLiElements.current[i] = element);
+                }, key: i, ...(current === i ? { className: "selection-time" } : {}), onClick: () => {
                     if (count === 24) {
                         setTimeChanged((prev) => !prev);
                         _hours.current = i;

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

@@ -17,7 +17,7 @@ const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }
     const _optionItems = useRef([]);
     const _searchField = useRef(null);
     // const _searchTimeOut = useRef<NodeJS.Timeout | null>(null);
-    let _otoFocus = useRef().current;
+    let _otoFocus = useRef(null).current;
     let _navigationIndex = useRef(0);
     // states
     const [optionsOpen, setOptionsOpen] = useState(false);
@@ -203,7 +203,7 @@ const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }
             }
         }
         return () => {
-            clearTimeout(_otoFocus);
+            _otoFocus && clearTimeout(_otoFocus);
             window.removeEventListener("blur", () => setOptionsOpen(false));
             document.removeEventListener("click", handleClickOutSide);
             document.removeEventListener("keydown", handleKeys);
@@ -323,7 +323,11 @@ const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }
                     onCreate && !isSearchTextEqual && searchText.length > 0 && React.createElement("li", null, createField()),
                     filteredOptions.map((option, index) => {
                         const isItem = multiple && value.some((_value) => _value.value === option.value);
-                        return (React.createElement("li", { key: index, ref: (element) => (_optionItems.current[index] = element), className: option === value ? "selectedItem" : "", onClick: (event) => {
+                        return (React.createElement("li", { key: index, ref: (element) => {
+                                if (!element)
+                                    return;
+                                _optionItems.current[index] = element;
+                            }, className: option === value ? "selectedItem" : "", onClick: (event) => {
                                 event.stopPropagation();
                                 handleItemSelected(option);
                             } },

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

@@ -6,26 +6,26 @@ declare const useLayout: () => {
         layout: {
             sider: {
                 left: {
-                    element: import("react").ReactNode | null;
+                    element: React.ReactNode | null;
                     active: boolean;
                 };
                 right: {
-                    element: import("react").ReactNode | null;
+                    element: React.ReactNode | null;
                     active: boolean;
                 };
             };
         };
         perPage: number;
     };
-    setConfig: import("react").Dispatch<import("react").SetStateAction<{
+    setConfig: React.Dispatch<React.SetStateAction<{
         layout: {
             sider: {
                 left: {
-                    element: import("react").ReactNode | null;
+                    element: React.ReactNode | null;
                     active: boolean;
                 };
                 right: {
-                    element: import("react").ReactNode | null;
+                    element: React.ReactNode | null;
                     active: boolean;
                 };
             };
@@ -35,7 +35,7 @@ declare const useLayout: () => {
 };
 declare const useLoading: () => {
     isLoading: boolean;
-    setIsLoading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
 };
 declare const useLanguage: () => string | undefined;
 export { useLayout, useLoading, useLanguage, useTranslation, useNotification, useValidation };

package/dist/libs/core/application/locales/table/ITableLocale.d.ts

@@ -12,6 +12,7 @@ interface ITableLocale {
     "Table.Filters.Where.Input.Item.7.Text": string;
     "Table.Filters.Where.Input.Item.8.Text": string;
     "Table.Filters.Search.Input.Placeholder": string;
+    "Table.Body.NoData.Text": string;
     "Table.Pagination.Information.Text": string;
 }
 export default ITableLocale;

package/dist/libs/core/application/locales/table/en.js

@@ -14,6 +14,8 @@ const TableEN = {
     "Table.Filters.Where.Input.Item.7.Text": "Is Empty",
     "Table.Filters.Where.Input.Item.8.Text": "Is Not Empty",
     "Table.Filters.Search.Input.Placeholder": "Search",
+    // Body
+    "Table.Body.NoData.Text": "No Data",
     // Pagination
     "Table.Pagination.Information.Text": "Showing {0} to {1} of {2} agreements",
 };

package/dist/libs/core/application/locales/table/tr.js

@@ -14,6 +14,8 @@ const TableTR = {
     "Table.Filters.Where.Input.Item.7.Text": "Boş",
     "Table.Filters.Where.Input.Item.8.Text": "Boş değil",
     "Table.Filters.Search.Input.Placeholder": "Ara",
+    // Body
+    "Table.Body.NoData.Text": "Veri Bulunamadı.",
     // Pagination
     "Table.Pagination.Information.Text": "{2} kayıt içerisinden {0} - {1} aralığı listeleniyor",
 };

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

@@ -27,7 +27,7 @@ export type MenuItemVariants = "vertical" | "horizontal";
 export type MenuItemType = "group" | "divider";
 export type FilterDataType = "string" | "number" | "date" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
 export type TableColumnType<T> = {
-    title: string;
+    title?: string;
     key?: keyof T | {
         field: keyof T;
         nestedKey: string;
@@ -42,7 +42,7 @@ export type TableColumnType<T> = {
         where?: (item: T) => boolean;
     };
     config?: {
-        width?: number;
+        width?: number | "auto" | "fit-content" | "max-content" | "min-content";
         alignContent?: "left" | "center" | "right";
         sticky?: "left" | "right";
         textWrap?: "wrap" | "nowrap";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.4.38",
+  "version": "0.4.40",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -42,11 +42,11 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@types/node": "^22.2.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/node": "^25.5.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "ts-node": "^10.9.2",
-    "tslib": "^2.6.3",
-    "typescript": "^5.5.4"
+    "tslib": "^2.8.1",
+    "typescript": "^6.0.2"
   }
 }