ar-design 0.2.47 → 0.2.49

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

@@ -4,7 +4,7 @@ import { ARIcon } from "../../icons";
 import Button from "../../form/button";
 import Checkbox from "../../form/checkbox";
 import Pagination from "../../navigation/pagination";
-import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { forwardRef, Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Input from "../../form/input";
 import Popover from "../../feedback/popover";
 import Utils from "../../../libs/infrastructure/shared/Utils";
@@ -184,18 +184,23 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
             return false;
         });
     };
+    const openAllSubrowsRecursively = (data, parentKey = "") => {
+        let result = {};
+        data.forEach((item, index) => {
+            const key = parentKey ? `${parentKey}.${index}` : `${index}`;
+            const subitems = item[_subrowSelector];
+            if (subitems && Array.isArray(subitems) && subitems.length > 0) {
+                const nested = openAllSubrowsRecursively(subitems, key);
+                result[key] = true;
+                result = { ...result, ...nested };
+            }
+        });
+        return result;
+    };
     const getData = useMemo(() => {
         let _data = [...data];
-        if (_subrowOpenAutomatically) {
-            data.forEach((item, index) => {
-                if (_subrowSelector in item) {
-                    setShowSubitems((prev) => ({
-                        ...prev,
-                        [`${index}`]: true,
-                    }));
-                }
-            });
-        }
+        if (_subrowOpenAutomatically)
+            setShowSubitems(openAllSubrowsRecursively(data));
         if (searchedText && Object.keys(searchedText).length > 0) {
             _data = _data.filter((item) => deepSearch(item, searchedText));
             setTotalRecords(_data.length);
@@ -241,7 +246,8 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
     };
     const renderRow = (item, index) => {
         const isHasSubitems = _subrowSelector in item;
-        return (React.createElement(React.Fragment, null,
+        // TODO: Keylere bakılacak...
+        return (React.createElement(Fragment, { key: `row-${index}` },
             React.createElement("tr", { key: `row-${index}` },
                 selections && (React.createElement("td", { className: "sticky-left", "data-sticky-position": "left" },
                     React.createElement(Checkbox, { ref: (element) => (_checkboxItems.current[index] = element), status: "primary", checked: selectionItems.some((selectionItem) => JSON.stringify(selectionItem) === JSON.stringify(item)), onChange: (event) => {
@@ -263,8 +269,9 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
     const SubitemList = ({ items, columns, index, depth }) => {
         return items.map((subitem, subindex) => {
             const _subitem = subitem[_subrowSelector];
-            return (React.createElement(React.Fragment, null,
-                React.createElement("tr", { key: `subitem-${index}-${subindex}` },
+            // TODO: Keylere bakılacak...
+            return (React.createElement(Fragment, { key: `subitem-${index}-${subindex}-${Math.random()}` },
+                React.createElement("tr", { key: `subitem-${index}-${subindex}-${Math.random()}` },
                     _subrowSelector in subitem && _subrowButton && (React.createElement("td", { style: { paddingLeft: `${depth}rem` } },
                         React.createElement("div", { className: "subitem-open-button-wrapper" },
                             React.createElement("span", { className: `${(showSubitems[`${index}.${subindex}`] && "opened") ?? ""} ${!_subitem && "passive"}`, onClick: () => {
@@ -276,7 +283,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                                     }));
                                 } })))),
                     columns.map((c, cIndex) => renderCell(subitem, c, cIndex, subindex, depth * 1.5))),
-                showSubitems[`${index}.${subindex}`] && _subitem && (React.createElement(SubitemList, { items: _subitem, columns: columns, index: subindex, depth: depth * 1.5 }))));
+                showSubitems[`${index}.${subindex}`] && _subitem && (React.createElement(SubitemList, { key: `subitem-${index}-${subindex}-${Math.random()}`, items: _subitem, columns: columns, index: subindex, depth: depth * 1.5 }))));
         });
     };
     // useEffects

package/dist/components/form/button/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import "../../../assets/css/components/form/button/styles.css";
 import IProps from "./IProps";
-declare const Button: React.FC<IProps>;
+declare const Button: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

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

@@ -1,9 +1,22 @@
 "use client";
-import React, { useRef } from "react";
+import React, { forwardRef, useRef } from "react";
 import "../../../assets/css/components/form/button/styles.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import Tooltip from "../../feedback/tooltip";
-const Button = ({ children, variant = "filled", shape, status = "primary", border, size = "normal", tooltip, position, icon, upperCase, ...attributes }) => {
+// const Button: React.FC<IProps> = ({
+//   children,
+//   variant = "filled",
+//   shape,
+//   status = "primary",
+//   border,
+//   size = "normal",
+//   tooltip,
+//   position,
+//   icon,
+//   upperCase,
+//   ...attributes
+// }) => {
+const Button = forwardRef(({ children, variant = "filled", shape, status = "primary", border, size = "normal", tooltip, position, icon, upperCase, ...attributes }, ref) => {
     // refs
     const _button = useRef(null);
     const _buttonClassName = ["ar-button"];
@@ -16,7 +29,7 @@ const Button = ({ children, variant = "filled", shape, status = "primary", borde
         _buttonClassName.push(position.type);
         _buttonClassName.push(position.inset.map((_inset) => _inset).join(" "));
     }
-    const buttonElement = (React.createElement("button", { ref: _button, ...attributes, className: _buttonClassName.map((c) => c).join(" "), onClick: (event) => {
+    const buttonElement = (React.createElement("button", { ref: ref ?? _button, ...attributes, className: _buttonClassName.map((c) => c).join(" "), onClick: (event) => {
             // Disabled gelmesi durumunda işlem yapmasına izin verme...
             if (attributes.disabled)
                 return;
@@ -26,7 +39,7 @@ const Button = ({ children, variant = "filled", shape, status = "primary", borde
                 if (_current && !_current.classList.contains(addClass)) {
                     // Sınıf ekleniyor...
                     _current.classList.add(addClass);
-                    // Sınıf 500 milisaniye sonra kaldırlacak.
+                    // Sınıf 750 milisaniye sonra kaldırlacak.
                     setTimeout(() => _current.classList.remove(addClass), 750);
                 }
             })();
@@ -36,6 +49,6 @@ const Button = ({ children, variant = "filled", shape, status = "primary", borde
             icon?.element,
             React.createElement("span", null, !shape ? (typeof children === "string" && upperCase ? children.toLocaleUpperCase() : children) : ""))));
     return !tooltip ? (buttonElement) : (React.createElement(Tooltip, { text: tooltip.text, direction: tooltip.direction }, buttonElement));
-};
+});
 Button.displayName = "Button";
 export default Button;

package/package.json

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