ar-design 0.4.62 → 0.4.64

package/dist/assets/css/components/data-display/card/styles.css

@@ -1,3 +1,5 @@
+@import url("./statuses.css");
+
 .ar-card {
   background-color: var(--white);
   border: solid 1px var(--light-400);
@@ -22,5 +24,3 @@
     padding: 1rem;
   }
 }
-
-@import url("./statuses.css");

package/dist/assets/css/components/data-display/dnd/styles.css

@@ -1,3 +1,6 @@
+@import url("./animations.css");
+@import url("./shadow.css");
+
 .ar-dnd {
   display: flex;
   flex-direction: column;
@@ -67,6 +70,3 @@
     }
   }
 }
-
-@import url("./animations.css");
-@import url("./shadow.css");

package/dist/assets/css/components/data-display/syntax-highlighter/syntax-highlighter.css

@@ -1,3 +1,5 @@
+@import url("./core/jsx.template.css");
+
 .ar-syntax {
   display: flex;
   flex-direction: column;
@@ -54,5 +56,3 @@
   font-size: 0.9rem;
   overflow-x: auto;
 }
-
-@import url("./core/jsx.template.css");

package/dist/assets/css/components/feedback/alert/styles.css

@@ -1,3 +1,5 @@
+@import url("./statuses.css");
+
 .ar-alert {
   padding: 1rem;
   border-radius: var(--border-radius-sm);
@@ -57,5 +59,3 @@
 .ar-alert ul li ul {
   margin-left: 0.1rem;
 }
-
-@import url("./statuses.css");

package/dist/assets/css/components/feedback/drawer/styles.css

@@ -1,3 +1,6 @@
+@import url("./header.css");
+@import url("./content.css");
+
 .ar-drawer-wrapper {
   position: fixed;
   inset: 0;
@@ -80,6 +83,3 @@
     right: 0px;
   }
 }
-
-@import url("./header.css");
-@import url("./content.css");

package/dist/assets/css/components/feedback/modal/styles.css

@@ -1,3 +1,12 @@
+@import url("./header.css");
+@import url("./content.css");
+@import url("./footer.css");
+
+/* Media Queries */
+@import url("./media-queries/x-large.css");
+@import url("./media-queries/medium.css");
+@import url("./media-queries/small.css");
+
 .ar-modal-wrapper {
   position: fixed;
   inset: 0;
@@ -13,12 +22,16 @@
 .ar-modal-wrapper.opened {
   visibility: visible;
   opacity: 1;
-  transition: visibility 250ms, opacity 250ms ease-in-out;
+  transition:
+    visibility 250ms,
+    opacity 250ms ease-in-out;
 }
 .ar-modal-wrapper.closed {
   visibility: hidden;
   opacity: 0;
-  transition: visibility 250ms, opacity 250ms ease-in-out;
+  transition:
+    visibility 250ms,
+    opacity 250ms ease-in-out;
 }
 /* #endregion */
 /* Open or Close */
@@ -38,12 +51,3 @@
 .ar-modal-wrapper > .ar-modal.small {
   width: 25%;
 }
-
-@import url("./header.css");
-@import url("./content.css");
-@import url("./footer.css");
-
-/* Media Queries */
-@import url("./media-queries/x-large.css");
-@import url("./media-queries/medium.css");
-@import url("./media-queries/small.css");

package/dist/assets/css/components/feedback/progress/progress.css

@@ -1,3 +1,6 @@
+@import url("./animations.css");
+@import url("./statuses.css");
+
 .ar-progress {
   position: relative;
   display: block;
@@ -45,6 +48,3 @@
   border: solid 2.5px transparent;
   border-top-color: var(--black);
 }
-
-@import url("./animations.css");
-@import url("./statuses.css");

package/dist/assets/css/components/form/button/styles.css

@@ -1,3 +1,9 @@
+/* Core Css */
+@import url("./core/shape.css");
+@import url("./core/icon.css");
+@import url("./core/position.css");
+@import url("./core/size.css");
+
 .ar-button {
   position: relative;
   min-width: fit-content;
@@ -5,7 +11,10 @@
   font-family: var(--system);
   font-size: 1rem;
   cursor: pointer;
-  transition: background-color 150ms, border 150ms, color 150ms ease-in-out;
+  transition:
+    background-color 150ms,
+    border 150ms,
+    color 150ms ease-in-out;
   outline: none;
 }
 .ar-button.disabled {
@@ -21,9 +30,3 @@
   align-items: center;
   text-wrap: nowrap;
 }
-
-/* Core Css */
-@import url("./core/shape.css");
-@import url("./core/icon.css");
-@import url("./core/position.css");
-@import url("./core/size.css");

package/dist/assets/css/components/form/checkbox/checkbox.css

@@ -1,3 +1,5 @@
+@import url("./core/border.css");
+
 .ar-checkbox-wrapper {
   display: flex;
   justify-content: center;
@@ -49,5 +51,3 @@
   border-radius: var(--border-radius-pill);
   z-index: 1;
 }
-
-@import url("./core/border.css");

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

@@ -1,3 +1,13 @@
+@import url("./calendar/calendar.css");
+@import url("./calendar/header.css");
+@import url("./calendar/content.css");
+@import url("./calendar/footer.css");
+
+@import url("./clock/clock.css");
+@import url("./clock/header.css");
+@import url("./clock/content.css");
+@import url("./clock/footer.css");
+
 :root {
   --header-height: 2.75rem;
   --footer-height: 2.75rem;
@@ -24,13 +34,3 @@
   transition: top 250ms ease-in-out;
   z-index: 1;
 }
-
-@import url("./calendar/calendar.css");
-@import url("./calendar/header.css");
-@import url("./calendar/content.css");
-@import url("./calendar/footer.css");
-
-@import url("./clock/clock.css");
-@import url("./clock/header.css");
-@import url("./clock/content.css");
-@import url("./clock/footer.css");

package/dist/assets/css/components/form/input/styles.css

@@ -1,3 +1,14 @@
+/* PHONE */
+@import url("./phone/styles.css");
+/* OTP */
+@import url("./otp/styles.css");
+
+/* Core Css */
+@import url("./core/icon.css");
+@import url("./core/border.css");
+@import url("./core/button.css");
+@import url("./core/addon.css");
+
 .ar-input-wrapper {
   display: flex;
   flex-direction: row;
@@ -56,7 +67,10 @@
         font-size: 1rem;
         outline: none;
         box-sizing: border-box;
-        transition: background 250ms, border 250ms, box-shadow 250ms ease-in-out;
+        transition:
+          background 250ms,
+          border 250ms,
+          box-shadow 250ms ease-in-out;
       }
 
       .handle-number-button {
@@ -104,14 +118,3 @@
     }
   }
 }
-
-/* PHONE */
-@import url("./phone/styles.css");
-/* OTP */
-@import url("./otp/styles.css");
-
-/* Core Css */
-@import url("./core/icon.css");
-@import url("./core/border.css");
-@import url("./core/button.css");
-@import url("./core/addon.css");

package/dist/assets/css/components/form/radio/radio.css

@@ -1,3 +1,5 @@
+@import url("./core/border.css");
+
 .ar-radio-wrapper {
   display: flex;
   align-items: center;
@@ -65,5 +67,3 @@
   font-size: 0.8rem;
   font-weight: 400;
 }
-
-@import url("./core/border.css");

package/dist/assets/css/components/form/select/styles.css

@@ -1,3 +1,5 @@
+@import url("./options.css");
+
 .ar-select-wrapper {
   position: relative;
   width: 100%;
@@ -180,5 +182,3 @@
     }
   }
 }
-
-@import url("./options.css");

package/dist/assets/css/components/form/switch/styles.css

@@ -1,3 +1,5 @@
+@import url("./core/border.css");
+
 .ar-switch-wrapper {
   display: flex;
   flex-wrap: nowrap;
@@ -29,7 +31,11 @@
           height: 1rem;
           border: solid 1px var(--gray-300);
           box-shadow: 0 0 0 0 rgba(var(--black-rgb), 0.2);
-          transition: left 150ms, width 150ms 150ms, height 150ms 150ms, box-shadow 150ms 150ms ease-in-out;
+          transition:
+            left 150ms,
+            width 150ms 150ms,
+            height 150ms 150ms,
+            box-shadow 150ms 150ms ease-in-out;
         }
       }
 
@@ -53,5 +59,3 @@
     }
   }
 }
-
-@import url("./core/border.css");

package/dist/assets/css/components/layout/layout.css

@@ -1,3 +1,13 @@
+/* Media Queries */
+/* .... */
+@import url("./media-queries/xxx-large.css");
+@import url("./media-queries/xx-large.css");
+@import url("./media-queries/x-large.css");
+@import url("./media-queries/large.css");
+@import url("./media-queries/medium.css");
+@import url("./media-queries/small.css");
+@import url("./media-queries/x-small.css");
+
 .ar-layout {
   display: flex;
   flex-direction: row;
@@ -118,13 +128,3 @@
     }
   }
 }
-
-/* Media Queries */
-/* .... */
-@import url("./media-queries/xxx-large.css");
-@import url("./media-queries/xx-large.css");
-@import url("./media-queries/x-large.css");
-@import url("./media-queries/large.css");
-@import url("./media-queries/medium.css");
-@import url("./media-queries/small.css");
-@import url("./media-queries/x-small.css");

package/dist/assets/css/components/navigation/steps/styles.css

@@ -1,3 +1,5 @@
+@import url("./animation.css");
+
 .ar-steps > .steps {
   display: flex;
   flex-direction: row;
@@ -80,7 +82,9 @@
 
 .ar-steps > .steps > .item > .item-icon > .in-progress {
   background-color: var(--primary);
-  box-shadow: 0 0 0 4px var(--white), 0 0 0 5px rgba(var(--primary-rgb), 0.5);
+  box-shadow:
+    0 0 0 4px var(--white),
+    0 0 0 5px rgba(var(--primary-rgb), 0.5);
 }
 .ar-steps > .steps > .item > .item-icon > .in-progress::before {
   display: inline-block;
@@ -140,5 +144,3 @@
   padding-top: 2.5rem;
   border-top: solid 4px var(--gray-100);
 }
-
-@import url("./animation.css");

package/dist/assets/css/core/ar-core.css

@@ -1,3 +1,13 @@
+@import url("./color-palette.css");
+@import url("./animation.css");
+@import url("./variants/filled.css");
+@import url("./variants/surface.css");
+@import url("./variants/outlined.css");
+@import url("./variants/dashed.css");
+@import url("./variants/borderless.css");
+@import url("./variants/border.css");
+@import url("./utils.css");
+
 *,
 *::before,
 *::after {
@@ -24,7 +34,6 @@
 /* Height */
 
 /* #region Color Palette */
-@import url("./color-palette.css");
 
 :root {
   --white: #fff;
@@ -103,46 +112,47 @@
 /* Box Shadow */
 
 /* #region Variants */
-@import url("./animation.css");
 
 .filled {
   border-color: transparent;
-  transition: border 250ms, box-shadow 250ms ease-in-out;
+  transition:
+    border 250ms,
+    box-shadow 250ms ease-in-out;
 }
 
-@import url("./variants/filled.css");
-
 .surface {
-  transition: border 250ms, box-shadow 250ms ease-in-out;
+  transition:
+    border 250ms,
+    box-shadow 250ms ease-in-out;
 }
 
-@import url("./variants/surface.css");
-
 .outlined {
   background-color: transparent;
   border-style: solid;
   border-width: 1px !important;
   border-color: transparent;
-  transition: border 250ms, box-shadow 250ms ease-in-out;
+  transition:
+    border 250ms,
+    box-shadow 250ms ease-in-out;
 }
 
-@import url("./variants/outlined.css");
-
 .dashed {
   background-color: transparent;
   border-style: dashed;
   border-width: 1px !important;
   border-color: transparent;
-  transition: border 250ms, box-shadow 250ms ease-in-out;
+  transition:
+    border 250ms,
+    box-shadow 250ms ease-in-out;
 }
 
-@import url("./variants/dashed.css");
-
 .borderless {
   background-color: transparent;
   border-width: 1px;
   border-color: transparent;
-  transition: border 250ms, box-shadow 250ms ease-in-out;
+  transition:
+    border 250ms,
+    box-shadow 250ms ease-in-out;
 }
 .borderless:disabled {
   background-color: var(--gray-100) !important;
@@ -151,9 +161,6 @@
   cursor: no-drop !important;
 }
 
-@import url("./variants/borderless.css");
-@import url("./variants/border.css");
-
 :is(input) {
   border: solid 1px transparent;
 }
@@ -183,5 +190,3 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 }
 /* #endregion */
 /* Variants */
-
-@import url("./utils.css");

package/dist/assets/css/core/utils.css

@@ -11,3 +11,6 @@
 .justify-content-end {
   justify-content: flex-end;
 }
+.align-items-center {
+  align-items: center;
+}

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

@@ -21,34 +21,30 @@ const FilterPopup = ({ children, refs, states, coordinate }) => {
     const handleClose = () => states.open.set(false);
     // useEffects
     useEffect(() => {
-        refs.buttons.current.map((button) => {
+        const currentButtons = refs.buttons.current;
+        currentButtons.forEach((button) => {
             if (button)
                 button.addEventListener("click", handleOpen);
         });
         return () => {
-            refs.buttons.current.map((button) => {
+            currentButtons.forEach((button) => {
                 if (button)
                     button.removeEventListener("click", handleOpen);
             });
         };
     }, [refs.buttons]);
     useEffect(() => {
-        const firstFilterButton = refs.buttons.current[0];
-        if (firstFilterButton) {
-            const rect = firstFilterButton.getBoundingClientRect();
-            coordinate.x = rect.left;
-            coordinate.y = rect.top + rect.height;
-        }
-        if (refs.tableContent.current) {
-            refs.tableContent.current.addEventListener("scroll", handleClose);
+        const tableContentRef = refs.tableContent.current;
+        if (tableContentRef) {
+            tableContentRef.addEventListener("scroll", handleClose);
         }
         document.addEventListener("click", handleClickOutSide);
         document.addEventListener("keydown", handleKeys);
         return () => {
             document.removeEventListener("click", handleClickOutSide);
             document.removeEventListener("keydown", handleKeys);
-            if (refs.tableContent.current) {
-                refs.tableContent.current.removeEventListener("scroll", handleClose);
+            if (tableContentRef) {
+                tableContentRef.removeEventListener("scroll", handleClose);
             }
         };
     }, []);

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

@@ -21,14 +21,9 @@ function PropertiesPopup({ refs, states, methods, coordinate, config }) {
         return (columnKey, direction) => {
             if (!columnKey)
                 return;
-            states.sort.set((prev) => {
-                const index = prev.findIndex((s) => s.key === columnKey);
-                if (index !== -1)
-                    return [{ key: columnKey, direction }];
-                return [{ key: columnKey, direction }];
-            });
+            states.sort.set(() => [{ key: columnKey, direction }]);
         };
-    }, []);
+    }, [states.sort]);
     const handleKeys = (event) => {
         const key = event.key;
         if (key === "Escape")
@@ -44,34 +39,30 @@ function PropertiesPopup({ refs, states, methods, coordinate, config }) {
     };
     // useEffects
     useEffect(() => {
-        refs.buttons.current.map((button) => {
+        const currentButtons = refs.buttons.current;
+        currentButtons.forEach((button) => {
             if (button)
                 button.addEventListener("click", handleOpen);
         });
         return () => {
-            refs.buttons.current.map((button) => {
+            currentButtons.forEach((button) => {
                 if (button)
                     button.removeEventListener("click", handleOpen);
             });
         };
     }, [refs.buttons]);
     useEffect(() => {
-        const firstFilterButton = refs.buttons.current[0];
-        if (firstFilterButton) {
-            const rect = firstFilterButton.getBoundingClientRect();
-            coordinate.x = rect.left;
-            coordinate.y = rect.top + rect.height;
-        }
-        if (refs.tableContent.current) {
-            refs.tableContent.current.addEventListener("scroll", handleClose);
+        const tableContentRef = refs.tableContent.current;
+        if (tableContentRef) {
+            tableContentRef.addEventListener("scroll", handleClose);
         }
         document.addEventListener("click", handleClickOutSide);
         document.addEventListener("keydown", handleKeys);
         return () => {
             document.removeEventListener("click", handleClickOutSide);
             document.removeEventListener("keydown", handleKeys);
-            if (refs.tableContent.current) {
-                refs.tableContent.current.removeEventListener("scroll", handleClose);
+            if (tableContentRef) {
+                tableContentRef.removeEventListener("scroll", handleClose);
             }
         };
     }, []);

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

@@ -5,7 +5,9 @@ import { ExtractKey } from "./Helpers";
 const MemoizedTHeadCell = function ({ refs, states, methods, columns, config, }) {
     return (React.createElement(React.Fragment, null, columns.map((c, cIndex) => {
         const { isProperties = true } = c.config ?? {};
-        const _direction = states.sort.get.find((s) => s.key === c.key)?.direction;
+        // Orijinal c.key araması optimize edildi ve string formatına güvenli şekilde çekildi
+        const columnKeyString = String(ExtractKey(c.key) ?? cIndex);
+        const _direction = states.sort.get.find((s) => s.key === columnKeyString)?.direction;
         let _className = [];
         if (c.config?.sticky)
             _className.push(`sticky-${c.config.sticky}`);
@@ -14,14 +16,13 @@ const MemoizedTHeadCell = function ({ refs, states, methods, columns, config, })
         if (c.config?.alignContent) {
             _className.push(`align-content-${c.config.alignContent}`);
         }
-        return (React.createElement("th", { key: `column-${cIndex}-${Math.random()}`, ...(_className.length > 0 && {
-                className: `${_className.map((c) => c).join(" ")}`,
+        return (React.createElement("th", { key: `column-head-${columnKeyString}`, ...(_className.length > 0 && {
+                className: `${_className.join(" ")}`,
             }), ...(c.config?.width
                 ? {
                     style: { minWidth: c.config.width, maxWidth: c.config.width },
                 }
-                : // : { style: { maxWidth: thWidths[cIndex], minWidth: thWidths[cIndex] } })}
-                    { style: {} }), ...(c.config?.sticky && {
+                : { style: {} }), ...(c.config?.sticky && {
                 "data-sticky-position": c.config.sticky,
             }) },
             React.createElement("div", null,
@@ -31,9 +32,9 @@ const MemoizedTHeadCell = function ({ refs, states, methods, columns, config, })
                         _direction === "desc" && React.createElement(ARIcon, { icon: "ArrowDown" }))),
                     c.title),
                 config.isProperties && isProperties && (React.createElement("span", { ref: (element) => {
-                        if (!element)
-                            return;
-                        refs.propertiesButton.current[cIndex] = element;
+                        if (element) {
+                            refs.propertiesButton.current[cIndex] = element;
+                        }
                     }, className: "properties-field", "data-properties-button": "true", onClick: (event) => {
                         event.preventDefault();
                         event.stopPropagation();