ar-design 0.1.86 → 0.1.87

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

@@ -62,6 +62,10 @@
   height: 3rem;
   padding: 0 1.5rem;
 }
+.ar-table > .content > table > thead > tr > th.min-w,
+.ar-table > .content > table > tbody > tr > td.min-w {
+  min-width: 150px;
+}
 
 .ar-table > .content > table > thead {
   background-color: var(--gray-100);

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

@@ -14,13 +14,49 @@
   box-shadow: 0 -5px 15px -2.5px rgba(var(--black-rgb), 0.1);
 }
 
-.ar-select-options > .no-options-field {
+.ar-select-options > .search-field {
+  padding: 0.5rem;
+  border-bottom: solid 1px var(--gray-200);
+}
+
+.ar-select-options > ul {
+  width: 100%;
+  max-height: calc(var(--input-height) * 5);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.ar-select-options > ul > li {
+  display: flex;
+  align-items: center;
+  gap: 0 0.5rem;
+  padding: 0 1rem;
+  height: var(--input-height);
+  cursor: pointer;
+}
+.ar-select-options > ul > li:hover {
+  background-color: var(--gray-200);
+}
+.ar-select-options > ul > li.selectedItem {
+  /* background-color: rgba(var(--success-rgb), 0.1); */
+}
+.ar-select-options > ul > li.navigate-with-arrow-keys {
+  background-color: var(--gray-100);
+}
+
+.ar-select-options > .no-options-field,
+.ar-select-options > ul > li > .no-options-field {
+  width: 100%;
   padding: 0.5rem 1rem;
 }
-.ar-select-options > .no-options-field > .text {
+.ar-select-options > ul > li > .no-options-field {
+  padding: 0 !important;
+}
+.ar-select-options > .no-options-field > .text,
+.ar-select-options > ul > li > .no-options-field > .text {
   color: var(--gray-500);
 }
-.ar-select-options > .no-options-field > .add-item {
+.ar-select-options > .no-options-field > .add-item,
+.ar-select-options > ul > li > .no-options-field > .add-item {
   display: flex;
   align-items: center;
   position: relative;
@@ -31,7 +67,8 @@
   color: var(--primary);
   cursor: pointer;
 }
-.ar-select-options > .no-options-field > .add-item::before {
+.ar-select-options > .no-options-field > .add-item::before,
+.ar-select-options > ul > li > .no-options-field > .add-item::before {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -40,7 +77,8 @@
   border: solid 5px transparent;
   border-left-color: var(--primary);
 }
-.ar-select-options > .no-options-field > .add-item > .plus {
+.ar-select-options > .no-options-field > .add-item > .plus,
+.ar-select-options > ul > li > .no-options-field > .add-item > .plus {
   display: inline-block;
   position: relative;
   background-color: var(--primary);
@@ -53,35 +91,6 @@
   line-height: 1rem;
 }
 
-.ar-select-options > .search-field {
-  padding: 0.5rem;
-  border-bottom: solid 1px var(--gray-200);
-}
-
-.ar-select-options > ul {
-  width: 100%;
-  max-height: calc(var(--input-height) * 5);
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-.ar-select-options > ul > li {
-  display: flex;
-  align-items: center;
-  gap: 0 0.5rem;
-  padding: 0 1rem;
-  height: var(--input-height);
-  cursor: pointer;
-}
-.ar-select-options > ul > li:hover {
-  background-color: var(--gray-200);
-}
-.ar-select-options > ul > li.selectedItem {
-  /* background-color: rgba(var(--success-rgb), 0.1); */
-}
-.ar-select-options > ul > li.navigate-with-arrow-keys {
-  background-color: var(--gray-100);
-}
-
 /* .ar-select-options:is(.opened) {
   visibility: visible;
   opacity: 1;

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

@@ -4,20 +4,19 @@ import { IChildren } from "../../../libs/types/IGlobalProps";
 export type SearchedParam = {
     [key: string]: string;
 };
+type ActionType = {
+    tooltip: string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+};
 interface IProps<T> extends IChildren {
     title?: string;
     description?: string;
     data: T[];
     columns: TableColumnType<T>[];
     actions?: {
-        create?: {
-            tooltip: string;
-            onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-        };
-        import?: {
-            tooltip: string;
-            onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-        };
+        create?: ActionType;
+        import?: ActionType;
+        filterClear?: ActionType;
     };
     selections?: (selectionItems: T[]) => void;
     searchedParams?: (params: SearchedParam | undefined, query: string) => void;
@@ -26,11 +25,9 @@ interface IProps<T> extends IChildren {
         perPage: number;
         onChange: (currentPage: number) => void;
     };
-    filterCleaner?: boolean;
     config?: {
         isServerSide?: boolean;
         isSearchable?: boolean;
-        isCleanFilter?: boolean;
         scroll?: {
             maxHeight: number;
         };

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

@@ -1,10 +1,13 @@
-import React from "react";
-import IProps from "./IProps";
 import "../../../assets/css/components/data-display/table/styles.css";
-declare const Table: {
-    <T extends object>({ children, title, description, data, columns, actions, selections, searchedParams, pagination, filterCleaner, config, }: IProps<T>): React.JSX.Element;
-    Action: React.FC<{
+import IProps from "./IProps";
+import React, { ReactElement } from "react";
+declare const TableWithRef: <T>(props: IProps<T> & {
+    ref?: React.ForwardedRef<HTMLTableElement>;
+}) => ReactElement;
+type TableCompoundComponents = typeof TableWithRef & {
+    Actions: React.FC<{
         children: React.ReactElement | React.ReactElement[];
     }>;
 };
+declare const Table: TableCompoundComponents;
 export default Table;

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

@@ -1,17 +1,17 @@
 "use client";
-import React, { useCallback, useEffect, useRef, useState } from "react";
 import "../../../assets/css/components/data-display/table/styles.css";
+import { ARIcon } from "../../icons";
+import Button from "../../form/button";
 import Checkbox from "../../form/checkbox";
-import Actions from "./Actions";
 import Pagination from "../../navigation/pagination";
-import Button from "../../form/button";
-import { ARIcon } from "../../icons";
-const Table = function ({ children, title, description, data, columns, actions, selections, searchedParams, pagination, filterCleaner, config = { isSearchable: false }, }) {
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import Actions from "./Actions";
+const TableWithRef = forwardRef(({ children, title, description, data, columns, actions, selections, searchedParams, pagination, config = { isSearchable: false }, }, ref) => {
     // refs
     let _dataLength = useRef(0);
     const _tableWrapper = useRef(null);
-    const _tableContent = useRef(null);
     const _table = useRef(null);
+    const _tableContent = useRef(null);
     const _checkboxItems = useRef([]);
     const _searchTextInputs = useRef([]);
     const _searchTimeOut = useRef(null);
@@ -30,9 +30,27 @@ const Table = function ({ children, title, description, data, columns, actions,
             }
         }
     }
+    // Custom Attributes
+    useImperativeHandle(ref, () => {
+        const tableCurrent = _table.current;
+        return {
+            ...tableCurrent,
+            filterCleaner: () => {
+                if (config.isServerSide) {
+                    setSearchedParams({});
+                    pagination && pagination.onChange(1);
+                }
+                else {
+                    setSearchedText({});
+                }
+                setCurrentPage(1);
+                _searchTextInputs.current.map((item) => item && (item.value = ""));
+            },
+        };
+    });
     // methods
     const handleScroll = () => {
-        if (!_table.current || !_tableWrapper.current)
+        if (!_tableWrapper.current)
             return;
         const wrapperRect = _tableWrapper.current.getBoundingClientRect();
         const updateStickyPositions = (elements) => {
@@ -87,8 +105,8 @@ const Table = function ({ children, title, description, data, columns, actions,
                 // #endregion
             });
         };
-        const theadElements = _table.current.querySelectorAll("thead > tr");
-        const tbodyElements = _table.current.querySelectorAll("tbody > tr");
+        const theadElements = _tableWrapper.current.querySelectorAll("table > thead > tr");
+        const tbodyElements = _tableWrapper.current.querySelectorAll("table > tbody > tr");
         requestAnimationFrame(() => {
             updateStickyPositions(theadElements);
             updateStickyPositions(tbodyElements);
@@ -102,12 +120,13 @@ const Table = function ({ children, title, description, data, columns, actions,
         return Object.entries(searchedText).every(([key, value]) => {
             const _itemValue = item[key];
             if (typeof _itemValue === "number" || typeof _itemValue === "string") {
-                return _itemValue.toString().toLowerCase().includes(value.toLowerCase());
+                return _itemValue.toString().toLocaleLowerCase().includes(value.toLocaleLowerCase());
             }
             if (typeof _itemValue === "object") {
-                deepSearch(_itemValue, searchedText);
+                return Object.entries(_itemValue ?? {}).some(([_, objValue]) => String(objValue).toLocaleLowerCase().includes(value.toLocaleLowerCase()));
+            }
+            if (Array.isArray(_itemValue)) {
             }
-            // Diğer türlerdeki değerleri atla.
             return false;
         });
     };
@@ -152,18 +171,6 @@ const Table = function ({ children, title, description, data, columns, actions,
         }
         setSelectAll(allChecked);
     }, [currentPage]);
-    // Tetikleme işlemleri için eklendi.
-    useEffect(() => {
-        if (config.isServerSide) {
-            setSearchedParams({});
-            pagination && pagination.onChange(1);
-        }
-        else {
-            setSearchedText({});
-        }
-        setCurrentPage(1);
-        _searchTextInputs.current.map((item) => item && (item.value = ""));
-    }, [filterCleaner]);
     return (React.createElement("div", { ref: _tableWrapper, className: _tableClassName.map((c) => c).join(" ") },
         (title || description || actions || React.Children.count(children) > 0) && (React.createElement("div", { className: "header" },
             React.createElement("div", { className: "title" },
@@ -173,10 +180,10 @@ const Table = function ({ children, title, description, data, columns, actions,
                 React.Children.count(children) > 0 && React.createElement("div", null, React.Children.map(children, (child) => child)),
                 actions && (React.createElement(React.Fragment, null,
                     actions.create && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Add", size: 16 }) }, tooltip: { text: actions.create.tooltip, direction: "top" }, onClick: actions.create.onClick })),
-                    actions.import && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Import", size: 16 }) }, tooltip: { text: actions.import.tooltip, direction: "top" }, onClick: actions.import.onClick })))),
-                config && (React.createElement(React.Fragment, null))))),
+                    actions.import && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Import", size: 16 }) }, tooltip: { text: actions.import.tooltip, direction: "top" }, onClick: actions.import.onClick })),
+                    actions.filterClear && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Trash", size: 16 }) }, tooltip: { text: actions.filterClear.tooltip, direction: "top" }, onClick: actions.filterClear.onClick }))))))),
         React.createElement("div", { ref: _tableContent, className: "content", onScroll: handleScroll },
-            React.createElement("table", { ref: _table },
+            React.createElement("table", { ref: ref },
                 React.createElement("thead", null,
                     React.createElement("tr", { key: "selection" },
                         selections && (React.createElement("th", { className: "selection-col sticky-left", "data-sticky-position": "left" },
@@ -195,11 +202,15 @@ const Table = function ({ children, title, description, data, columns, actions,
                             let _className = [];
                             if (c.config?.sticky)
                                 _className.push(`sticky-${c.config.sticky}`);
+                            if (!c.config?.width)
+                                _className.push("min-w");
                             if (c.config?.alignContent) {
                                 _className.push(`align-content-${c.config.alignContent}`);
                             }
                             return (React.createElement("th", { key: `column-${cIndex}`, ...(_className.length > 0 && {
                                     className: `${_className.map((c) => c).join(" ")}`,
+                                }), ...(c.config?.width && {
+                                    style: { minWidth: c.config.width },
                                 }), ...(c.config?.sticky && {
                                     "data-sticky-position": c.config.sticky,
                                 }) }, c.title));
@@ -274,9 +285,7 @@ const Table = function ({ children, title, description, data, columns, actions,
                             _className.push(`align-content-${c.config.alignContent}`);
                         if (c.config?.textWrap)
                             _className.push(`text-${c.config.textWrap}`);
-                        return (React.createElement("td", { key: `cell-${index}-${cIndex}`, ...(c.config?.width && {
-                                style: { minWidth: c.config.width },
-                            }), ...(_className.length > 0 && {
+                        return (React.createElement("td", { key: `cell-${index}-${cIndex}`, ...(_className.length > 0 && {
                                 className: `${_className.map((c) => c).join(" ")}`,
                             }), ...(c.config?.sticky && {
                                 "data-sticky-position": c.config.sticky,
@@ -298,6 +307,8 @@ const Table = function ({ children, title, description, data, columns, actions,
                         config.isServerSide && pagination.onChange(currentPage);
                         setCurrentPage(currentPage);
                     } }))))));
-};
-Table.Action = Actions;
+});
+// Actions'ı ekliyoruz.
+const Table = TableWithRef;
+Table.Actions = Actions;
 export default Table;

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

@@ -15,9 +15,9 @@ const Alert = ({ children, message, status = "primary", border = { radius: "sm"
         // TODO: Bu konu hakkında düşünüp karar verilecek.
         if (!emphasize)
             return message;
-        let _lowerCaseMessage = message.toLowerCase();
+        let _lowerCaseMessage = message.toLocaleLowerCase();
         return emphasize.reduce((currentMessage, emphasize) => {
-            let _lowerCaseEmphasize = emphasize.toLowerCase();
+            let _lowerCaseEmphasize = emphasize.toLocaleLowerCase();
             let startIndex = _lowerCaseMessage.indexOf(_lowerCaseEmphasize);
             while (startIndex !== -1) {
                 const endIndex = startIndex + emphasize.length;
@@ -26,7 +26,7 @@ const Alert = ({ children, message, status = "primary", border = { radius: "sm"
                 const lastValue = currentMessage.substring(endIndex);
                 currentMessage = `${firstValue} <span class="ar-alert-tag">${originalTag}</span> ${lastValue}`;
                 // Update the lowerCaseMessage to reflect the change
-                _lowerCaseMessage = currentMessage.toLowerCase();
+                _lowerCaseMessage = currentMessage.toLocaleLowerCase();
                 // Find the next occurrence of the tag
                 startIndex = _lowerCaseMessage.indexOf(_lowerCaseEmphasize, startIndex + `<span class="ar-alert-tag">${originalTag}</span>`.length);
             }

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

@@ -20,6 +20,7 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
     // states
     const [optionsOpen, setOptionsOpen] = useState(false);
     const [filteredOptions, setFilteredOptions] = useState([]);
+    const [isSearchTextEqual, setIsSearchTextEqual] = useState(false);
     const [searchText, setSearchText] = useState("");
     const [singleInputText, setSingleInputText] = useState("");
     const [navigationIndex, setNavigationIndex] = useState(0);
@@ -110,6 +111,17 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
         }
         setOptionsOpen(false);
     };
+    const createField = () => {
+        if (!onCreate)
+            return;
+        return (React.createElement("div", { className: "no-options-field", onClick: (event) => {
+                event.stopPropagation();
+                onCreate({ value: "", text: singleInputText });
+                setOptionsOpen(false);
+            } }, options.length === 0 && (singleInputText.length === 0 || searchText.length === 0) ? (React.createElement("span", { className: "text" }, "Herhangi bir kay\u0131t bulunumad\u0131.")) : (React.createElement("span", { className: "add-item" },
+            React.createElement("span", { className: "plus" }, "+"),
+            singleInputText.length !== 0 ? singleInputText : searchText))));
+    };
     // Özel büyük harfe dönüştürme işlevi.
     const convertToUpperCase = (str) => {
         return str
@@ -190,7 +202,12 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
         setFilteredOptions(options?.filter((option) => {
             if (!optionsOpen)
                 return option;
-            return option.text.toLowerCase().includes(searchText.toLowerCase());
+            return option.text.toLocaleLowerCase().includes(searchText.toLocaleLowerCase());
+        }));
+        setIsSearchTextEqual(options?.some((option) => {
+            if (!optionsOpen)
+                return option;
+            return option.text.toLocaleLowerCase() == searchText.toLocaleLowerCase();
         }));
         // Arama yapılması durumunda değerleri sıfırla.
         setNavigationIndex(0);
@@ -246,22 +263,18 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
             ReactDOM.createPortal(React.createElement("div", { ref: _options, className: "ar-select-options" },
                 multiple && (React.createElement("div", { className: "search-field" },
                     React.createElement(Input, { ref: _searchField, variant: "outlined", status: "light", placeholder: "Search...", value: searchText, onChange: (event) => setSearchText(event.target.value), onClick: (event) => event.stopPropagation() }))),
-                filteredOptions.length > 0 ? (React.createElement("ul", null, 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) => {
-                            event.stopPropagation();
-                            handleItemSelected(option);
-                        } },
-                        multiple && React.createElement(Checkbox, { checked: isItem, status: isItem ? "primary" : "light", disabled: true }),
-                        React.createElement("span", null, option.text)));
-                }))) : !onCreate ? (React.createElement("div", { className: "no-options-field" },
-                    React.createElement("span", { className: "text" }, "Herhangi bir kay\u0131t bulunumad\u0131."))) : (React.createElement("div", { className: "no-options-field", onClick: (event) => {
-                        event.stopPropagation();
-                        onCreate({ value: "", text: singleInputText });
-                        setOptionsOpen(false);
-                    } }, options.length === 0 && singleInputText.length === 0 && searchText.length === 0 ? (React.createElement("span", { className: "text" }, "Herhangi bir kay\u0131t bulunumad\u0131.")) : (React.createElement("span", { className: "add-item" },
-                    React.createElement("span", { className: "plus" }, "+"),
-                    singleInputText.length !== 0 ? singleInputText : searchText))))), document.body)));
+                filteredOptions.length > 0 ? (React.createElement("ul", null,
+                    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) => {
+                                event.stopPropagation();
+                                handleItemSelected(option);
+                            } },
+                            multiple && React.createElement(Checkbox, { checked: isItem, status: isItem ? "primary" : "light", disabled: true }),
+                            React.createElement("span", null, option.text)));
+                    }))) : !onCreate ? (React.createElement("div", { className: "no-options-field" },
+                    React.createElement("span", { className: "text" }, "Herhangi bir kay\u0131t bulunumad\u0131."))) : (createField())), document.body)));
 };
 Select.displayName = "Select";
 export default Select;

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

@@ -37,6 +37,9 @@ export type TableColumnType<T> = {
         textWrap?: "wrap" | "nowrap";
     };
 };
+export type HTMLTableElementWithCustomAttributes = {
+    filterCleaner: () => void;
+} & HTMLTableElement;
 export type StepProps = {
     title: string;
     content: React.ReactNode;

package/package.json

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