@skalfa/skalfa-component 1.0.33 → 1.0.35

package/dist/input/InputContent.component.js

@@ -458,6 +458,68 @@ function InputContentComponent({ label, tip, className = "", value, invalid, val
             }
         }
     }, [handleBold, handleItalic, handleUnderline, handleStrikethrough, handleLink, handleEditorChange, updateActiveStates]);
+    const handlePaste = (0, react_1.useCallback)((e) => {
+        const pastedText = e.clipboardData.getData("text/plain");
+        if (!pastedText)
+            return;
+        const urlRegex = /(\b(?:https?:\/\/|www\.)[^\s()<>]+(?:\([\w\d]+\)|[^.,?;:"')\s]))/gi;
+        if (urlRegex.test(pastedText)) {
+            e.preventDefault();
+            const escapeHtml = (text) => {
+                return text
+                    .replace(/&/g, "&amp;")
+                    .replace(/</g, "&lt;")
+                    .replace(/>/g, "&gt;")
+                    .replace(/"/g, "&quot;")
+                    .replace(/'/g, "&#039;");
+            };
+            const tokens = [];
+            let lastIndex = 0;
+            let match;
+            urlRegex.lastIndex = 0;
+            while ((match = urlRegex.exec(pastedText)) !== null) {
+                if (match.index > lastIndex) {
+                    tokens.push(escapeHtml(pastedText.substring(lastIndex, match.index)));
+                }
+                const url = match[0];
+                let href = url;
+                if (url.toLowerCase().startsWith("www.")) {
+                    href = "https://" + url;
+                }
+                const escapedHref = escapeHtml(href);
+                const escapedUrl = escapeHtml(url);
+                tokens.push(`<a href="${escapedHref}" class="text-primary underline" data-link="${escapedHref}" target="_blank" rel="noopener">${escapedUrl}</a>`);
+                lastIndex = urlRegex.lastIndex;
+            }
+            if (lastIndex < pastedText.length) {
+                tokens.push(escapeHtml(pastedText.substring(lastIndex)));
+            }
+            const htmlContent = tokens.join("").replace(/\n/g, "<br>");
+            const sel = window.getSelection();
+            if (!sel || sel.rangeCount === 0)
+                return;
+            const range = sel.getRangeAt(0);
+            range.deleteContents();
+            const tempDiv = document.createElement("div");
+            tempDiv.innerHTML = htmlContent;
+            const fragment = document.createDocumentFragment();
+            let child;
+            while ((child = tempDiv.firstChild)) {
+                fragment.appendChild(child);
+            }
+            const lastNode = fragment.lastChild;
+            range.insertNode(fragment);
+            if (lastNode) {
+                const newRange = document.createRange();
+                newRange.setStartAfter(lastNode);
+                newRange.collapse(true);
+                sel.removeAllRanges();
+                sel.addRange(newRange);
+            }
+            saveSelection();
+            handleEditorChange();
+        }
+    }, [saveSelection, handleEditorChange]);
     const renderControlItem = (0, react_1.useCallback)((item, index) => {
         if (typeof item !== "string") {
             return (0, jsx_runtime_1.jsx)("div", { children: item }, index);
@@ -555,7 +617,7 @@ function InputContentComponent({ label, tip, className = "", value, invalid, val
                             saveSelection();
                             handleEditorChange();
                             updateActiveStates();
-                        }, onKeyDown: handleKeyDown, onMouseUp: () => {
+                        }, onKeyDown: handleKeyDown, onPaste: handlePaste, onMouseUp: () => {
                             saveSelection();
                             updateActiveStates();
                         }, onKeyUp: () => {

package/dist/supervision/TableSupervision.component.d.ts

@@ -58,11 +58,12 @@ export type TableSupervisionProps = {
             description: string;
         };
         on?: (item: Record<string, any>) => boolean;
-    } | ((row: object, setModal?: (type: "EDIT" | "DELETE") => void, setDataSelected?: () => void, reset?: () => void, size?: string) => ReactNode))[];
+    } | ((row: Record<string, any>, setModal?: (type: "EDIT" | "DELETE") => void, setDataSelected?: () => void, reset?: () => void, size?: string) => ReactNode))[];
     block?: boolean;
     noIndex?: boolean;
     actionBulkingControl?: TableProps["actionBulking"];
     controlBar?: (ControlBarOptionType | "CREATE" | "IMPORT" | "EXPORT" | "PRINT")[];
+    filterBar?: ReactNode;
     responsiveControl?: {
         mobile?: boolean | {
             item?: (item: Record<string, any>, key: number) => ReactNode;
@@ -75,4 +76,4 @@ export type TableSupervisionProps = {
         };
     };
 };
-export declare function TableSupervisionComponent({ title, id, fetchControl, columnControl, formControl, onRowClick, detailControl, actionControl, actionBulkingControl, block, controlBar, noIndex, responsiveControl, urlParam, }: TableSupervisionProps): import("@types/react").JSX.Element;
+export declare function TableSupervisionComponent({ title, id, fetchControl, columnControl, formControl, onRowClick, detailControl, actionControl, actionBulkingControl, block, controlBar, filterBar, noIndex, responsiveControl, urlParam, }: TableSupervisionProps): import("@types/react").JSX.Element;

package/dist/supervision/TableSupervision.component.js

@@ -12,7 +12,7 @@ const ExportExcel = _utils_1.registry.get("ExportExcel");
 const ImportExcel = _utils_1.registry.get("ImportExcel");
 ;
 ;
-function TableSupervisionComponent({ title, id, fetchControl, columnControl, formControl, onRowClick, detailControl, actionControl, actionBulkingControl, block, controlBar, noIndex, responsiveControl, urlParam, }) {
+function TableSupervisionComponent({ title, id, fetchControl, columnControl, formControl, onRowClick, detailControl, actionControl, actionBulkingControl, block, controlBar, filterBar, noIndex, responsiveControl, urlParam, }) {
     const l = (0, skalfa_lang_1.useLang)();
     const { tableKey, tableControl, data, selected, setSelected, checks, setChecks, reset, focus, setFocus } = (0, _utils_1.useTable)(fetchControl, id, title, (urlParam || true));
     const { setToggle, toggle } = (0, _contexts_1.useToggleContext)();
@@ -243,7 +243,7 @@ function TableSupervisionComponent({ title, id, fetchControl, columnControl, for
                     ...(columns?.filter((c) => !!c.filterable)?.length ? ["FILTER"] : []),
                     ...(columns?.filter((c) => !!c.sortable)?.length ? ["SORT"] : []),
                     "SELECTABLE", "REFRESH",
-                ], columns: columns, data: dataTables, onRowClick: onRowClick ? onRowClick : detailControl != false ? (e) => {
+                ], filterBar: filterBar, columns: columns, data: dataTables, onRowClick: onRowClick ? onRowClick : detailControl != false ? (e) => {
                     setToggle(`MODAL_SHOW_${toggleKey}`);
                     setSelected(e);
                 } : undefined, actionBulking: actionBulkingControl, checks: checks || [], onChangeChecks: (e) => setChecks(e), block: block, focus: focus, noIndex: noIndex, responsiveControl: responsiveControl ? {

package/dist/table/Table.component.d.ts

@@ -26,6 +26,7 @@ export interface TableColumnType {
 export interface TableProps {
     id?: string;
     controlBar?: false | ControlBarOptionType[];
+    filterBar?: ReactNode;
     columns: TableColumnType[];
     data: Record<string, any>[];
     pagination?: PaginationProps | false;
@@ -61,4 +62,4 @@ export interface TableProps {
     /** Use custom class with: "controller-bar::", "head-column::", "column::", "floating-action::", "row::". */
     className?: string;
 }
-export declare function TableComponent({ id, controlBar, columns, data, pagination, loading, sortBy, onChangeSortBy, search, onChangeSearch, searchableColumn, onChangeSearchableColumn, filter, onChangeFilter, checks, onChangeChecks, actionBulking, focus, onRowClick, onRefresh, block, noIndex, responsiveControl, className, }: TableProps): import("@types/react").JSX.Element;
+export declare function TableComponent({ id, controlBar, filterBar, columns, data, pagination, loading, sortBy, onChangeSortBy, search, onChangeSearch, searchableColumn, onChangeSearchableColumn, filter, onChangeFilter, checks, onChangeChecks, actionBulking, focus, onRowClick, onRefresh, block, noIndex, responsiveControl, className, }: TableProps): import("@types/react").JSX.Element;

package/dist/table/Table.component.js

@@ -12,7 +12,7 @@ const ScrollContainer_component_1 = require("../wrap/ScrollContainer.component")
 const Checkbox_component_1 = require("../input/Checkbox.component");
 const Swipe_component_1 = require("../wrap/Swipe.component");
 const skalfa_lang_1 = require("@skalfa/skalfa-lang");
-function TableComponent({ id, controlBar, columns, data, pagination, loading, sortBy, onChangeSortBy, search, onChangeSearch, searchableColumn, onChangeSearchableColumn, filter, onChangeFilter, checks, onChangeChecks, actionBulking, focus, onRowClick, onRefresh, block, noIndex, responsiveControl, className = "", }) {
+function TableComponent({ id, controlBar, filterBar, columns, data, pagination, loading, sortBy, onChangeSortBy, search, onChangeSearch, searchableColumn, onChangeSearchableColumn, filter, onChangeFilter, checks, onChangeChecks, actionBulking, focus, onRowClick, onRefresh, block, noIndex, responsiveControl, className = "", }) {
     const l = (0, skalfa_lang_1.useLang)();
     const [displayColumns, setDisplayColumns] = (0, react_1.useState)([]);
     const [showFloatingAction, setShowFloatingAction] = (0, react_1.useState)(false);
@@ -97,7 +97,7 @@ function TableComponent({ id, controlBar, columns, data, pagination, loading, so
                     selector: c.selector,
                     type: typeof c?.filterable == "object" ? c?.filterable?.type : "text",
                     options: typeof c?.filterable == "object" && c?.filterable?.type == "select" ? c?.filterable?.options : undefined
-                })), onFilter: (filters) => onChangeFilter?.(filters), filter: filter, className: (0, _utils_1.pcn)(className, "controller-bar") || "" })), (0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)(ScrollContainer_component_1.ScrollContainerComponent, { scrollFloating: !isSm && block, className: `w-full ${block ? "pb-12" : ""}`, onScroll: (e) => {
+                })), onFilter: (filters) => onChangeFilter?.(filters), filter: filter, className: (0, _utils_1.pcn)(className, "controller-bar") || "" })), filterBar, (0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)(ScrollContainer_component_1.ScrollContainerComponent, { scrollFloating: !isSm && block, className: `w-full ${block ? "pb-12" : ""}`, onScroll: (e) => {
                         actionColumnRef.current?.clientWidth && e.scrollLeft &&
                             setShowFloatingAction(e.scrollLeft + e.clientWidth <= e.scrollWidth - actionColumnRef.current?.clientWidth);
                     }, footer: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: block && pagination && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "py-6" }), (0, jsx_runtime_1.jsx)("div", { className: "my-2 absolute bottom-0 w-full", children: (0, jsx_runtime_1.jsx)(Pagination_component_1.PaginationComponent, { ...pagination }) })] })) }), children: loading ? ((0, jsx_runtime_1.jsx)("div", { className: "w-max min-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "table-loading-container", children: (0, jsx_runtime_1.jsx)("h1", { className: "table-loading-text", children: l.base.tableLoading ? l.base.tableLoading() : "" }) }) })) : !data || !data.length ? ((0, jsx_runtime_1.jsx)("div", { className: "table-empty-container", children: (0, jsx_runtime_1.jsx)("h1", { className: "table-empty-text", children: l.base.tableEmpty ? l.base.tableEmpty() : "Data empty" }) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !isSm || !responsiveControl?.mobile ? ((0, jsx_runtime_1.jsxs)("div", { className: "w-max min-w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("table-head-row", (0, _utils_1.pcn)(className, "row")), children: [!!actionBulking && ((0, jsx_runtime_1.jsx)("div", { className: "table-head-column w-max", children: (0, jsx_runtime_1.jsx)(Checkbox_component_1.CheckboxComponent, { name: "selected_table", className: "w-5 h-5", checked: data.length > 0 && checks?.length === data.length, onChange: () => data.length > 0 && checks?.length === data.length ? onChangeChecks?.([]) : onChangeChecks?.(data.map((d) => d.id)) }) })), !noIndex && (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-head-column w-8", (0, _utils_1.pcn)(className, "head-column")), children: "#" }), renderHead()] }), (0, jsx_runtime_1.jsx)("div", { className: "table-body", children: data.map((item, key) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skalfa/skalfa-component",
-  "version": "1.0.33",
+  "version": "1.0.35",
   "description": "Reusable UI components for Skalfa App.",
   "license": "MIT",
   "keywords": [

package/src/input/InputContent.component.tsx

@@ -574,6 +574,83 @@ export function InputContentComponent({
     }
   }, [handleBold, handleItalic, handleUnderline, handleStrikethrough, handleLink, handleEditorChange, updateActiveStates]);
 
+  const handlePaste = useCallback((e: React.ClipboardEvent<HTMLDivElement>) => {
+    const pastedText = e.clipboardData.getData("text/plain");
+    if (!pastedText) return;
+
+    const urlRegex = /(\b(?:https?:\/\/|www\.)[^\s()<>]+(?:\([\w\d]+\)|[^.,?;:"')\s]))/gi;
+
+    if (urlRegex.test(pastedText)) {
+      e.preventDefault();
+
+      const escapeHtml = (text: string) => {
+        return text
+          .replace(/&/g, "&amp;")
+          .replace(/</g, "&lt;")
+          .replace(/>/g, "&gt;")
+          .replace(/"/g, "&quot;")
+          .replace(/'/g, "&#039;");
+      };
+
+      const tokens: string[] = [];
+      let lastIndex = 0;
+      let match;
+      urlRegex.lastIndex = 0;
+
+      while ((match = urlRegex.exec(pastedText)) !== null) {
+        if (match.index > lastIndex) {
+          tokens.push(escapeHtml(pastedText.substring(lastIndex, match.index)));
+        }
+
+        const url = match[0];
+        let href = url;
+        if (url.toLowerCase().startsWith("www.")) {
+          href = "https://" + url;
+        }
+
+        const escapedHref = escapeHtml(href);
+        const escapedUrl = escapeHtml(url);
+        tokens.push(`<a href="${escapedHref}" class="text-primary underline" data-link="${escapedHref}" target="_blank" rel="noopener">${escapedUrl}</a>`);
+
+        lastIndex = urlRegex.lastIndex;
+      }
+
+      if (lastIndex < pastedText.length) {
+        tokens.push(escapeHtml(pastedText.substring(lastIndex)));
+      }
+
+      const htmlContent = tokens.join("").replace(/\n/g, "<br>");
+
+      const sel = window.getSelection();
+      if (!sel || sel.rangeCount === 0) return;
+      const range = sel.getRangeAt(0);
+      range.deleteContents();
+
+      const tempDiv = document.createElement("div");
+      tempDiv.innerHTML = htmlContent;
+
+      const fragment = document.createDocumentFragment();
+      let child: Node | null;
+      while ((child = tempDiv.firstChild)) {
+        fragment.appendChild(child);
+      }
+
+      const lastNode = fragment.lastChild;
+      range.insertNode(fragment);
+
+      if (lastNode) {
+        const newRange = document.createRange();
+        newRange.setStartAfter(lastNode);
+        newRange.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(newRange);
+      }
+
+      saveSelection();
+      handleEditorChange();
+    }
+  }, [saveSelection, handleEditorChange]);
+
   const renderControlItem = useCallback((item: ToolbarControlItem, index: number) => {
     if (typeof item !== "string") {
       return <div key={index}>{item}</div>;
@@ -945,6 +1022,7 @@ export function InputContentComponent({
             updateActiveStates();
           }}
           onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
           onMouseUp={() => {
             saveSelection();
             updateActiveStates();

package/src/supervision/TableSupervision.component.tsx

@@ -64,7 +64,7 @@ export type TableSupervisionProps = {
       shortcut       ?:  { key: string, description: string },
       on             ?:  (item: Record<string, any>) => boolean,
     } | ((
-      row              :  object,
+      row              :  Record<string, any>,
       setModal        ?:  (type: "EDIT" | "DELETE") => void,
       setDataSelected ?:  () => void,
       reset           ?:  () => void,
@@ -75,6 +75,7 @@ export type TableSupervisionProps = {
   noIndex              ?: boolean;
   actionBulkingControl ?:  TableProps["actionBulking"],
   controlBar           ?:  (ControlBarOptionType | "CREATE" | "IMPORT" | "EXPORT" | "PRINT")[];
+  filterBar            ?: ReactNode;
   responsiveControl    ?:  {
     mobile                 ?:  boolean | {
       item                 ?:  (item: Record<string, any>, key: number) => ReactNode,
@@ -98,6 +99,7 @@ export function TableSupervisionComponent({
   actionBulkingControl,
   block,
   controlBar,
+  filterBar,
   noIndex,
   responsiveControl,
   urlParam,
@@ -500,6 +502,7 @@ export function TableSupervisionComponent({
           ...(columns?.filter((c) => !!(c as { sortable?: any }).sortable)?.length ? ["SORT"] : []),
           "SELECTABLE", "REFRESH",
         ]}
+        filterBar={filterBar}
         columns={columns as TableColumnType[]}
         data={dataTables}
         onRowClick={onRowClick ? onRowClick : detailControl != false ? (e) => {

package/src/table/Table.component.tsx

@@ -36,6 +36,8 @@ export interface TableProps {
   id                        ?: string;
   
   controlBar                ?:  false | ControlBarOptionType[];
+  filterBar                 ?: ReactNode;
+
 
   columns                    :  TableColumnType[];
   data                       :  Record<string, any>[];
@@ -76,6 +78,7 @@ export interface TableProps {
 export function TableComponent({
   id,
   controlBar,
+  filterBar,
   columns,
   data,
   pagination,
@@ -290,6 +293,8 @@ export function TableComponent({
         />
       )}
 
+      {filterBar}
+
       <div className="relative">
         <ScrollContainerComponent
           scrollFloating={!isSm && block}