ar-design 0.4.23 → 0.4.25

package/dist/assets/css/components/form/date-picker/date-picker.css

@@ -8,6 +8,10 @@
   display: flex;
   flex-wrap: nowrap;
   flex-direction: row;
+
+  > .wrapper {
+    width: 100%;
+  }
 }
 .ar-date-picker > label {
   position: absolute;

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,11 @@ 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 _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 +19,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" },
@@ -133,7 +130,14 @@ function TBody({ data, columns, methods, states, config }) {
     useEffect(() => {
         const heights = _tBodyTR.current.map((el) => (el ? el.getBoundingClientRect().height : 0));
         setRowHeights(heights);
+        setTriggerForRender((prev) => !prev);
     }, [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

@@ -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/package.json

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