@skalfa/skalfa-component 1.0.34 → 1.0.36

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/input/InputImage.component.js

@@ -9,7 +9,7 @@ const _utils_1 = require("@utils");
 const BottomSheet_component_1 = require("../modal/BottomSheet.component");
 const Button_component_1 = require("../button/Button.component");
 const Modal_component_1 = require("../modal/Modal.component");
-const InputImageComponent = ({ name, label, tip, value, disabled, aspect = "1/1", invalid, validations, onChange, register, unregister, className = "", }) => {
+const InputImageComponent = ({ name, label, tip, value, disabled, aspect, invalid, validations, onChange, register, unregister, className = "", }) => {
     const { isSm } = (0, _utils_1.useResponsive)();
     const randomId = (0, _utils_1.useInputRandomId)();
     const inputRef = (0, react_1.useRef)(null);
@@ -19,6 +19,9 @@ const InputImageComponent = ({ name, label, tip, value, disabled, aspect = "1/1"
     const [openCrop, setOpenCrop] = (0, react_1.useState)(false);
     const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, true, unregister);
     const [invalidMessage, setInvalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
+    const isCroppingEnabled = !!aspect;
+    const currentAspect = aspect || "1/1";
+    const containerAspect = (preview && !isCroppingEnabled) ? undefined : currentAspect;
     (0, react_1.useEffect)(() => {
         if (value) {
             const url = typeof value === "object" ? URL.createObjectURL(value) : value;
@@ -48,7 +51,14 @@ const InputImageComponent = ({ name, label, tip, value, disabled, aspect = "1/1"
             setInvalidMessage("Format gambar tidak diperbolehkan (JPG/PNG/WebP)");
             return;
         }
-        openCropper(file);
+        if (isCroppingEnabled) {
+            openCropper(file);
+        }
+        else {
+            const url = URL.createObjectURL(file);
+            setPreview(url);
+            onChange?.(file);
+        }
     };
     const onCropDone = (file) => {
         const url = URL.createObjectURL(file);
@@ -69,17 +79,27 @@ const InputImageComponent = ({ name, label, tip, value, disabled, aspect = "1/1"
         e.preventDefault();
         setDrag(false);
         const file = e.dataTransfer.files?.[0];
-        file && openCropper(file);
+        if (!file)
+            return;
+        if (isCroppingEnabled) {
+            openCropper(file);
+        }
+        else {
+            const url = URL.createObjectURL(file);
+            setPreview(url);
+            onChange?.(file);
+        }
     };
     return ((0, jsx_runtime_1.jsxs)("div", { className: "input-container w-full", children: [label && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] })), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip")), children: tip })), (0, jsx_runtime_1.jsx)("label", { htmlFor: randomId, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("input-image-dropzone", drag ? "input-image-dropzone-drag" : "", invalidMessage && "input-image-dropzone-error", (0, _utils_1.pcn)(className, "input")), style: {
-                        aspectRatio: aspect,
-                        backgroundImage: preview ? `url(${preview})` : undefined,
+                        position: "relative",
+                        aspectRatio: containerAspect,
+                        backgroundImage: preview && containerAspect ? `url(${preview})` : undefined,
                         backgroundSize: "cover",
                         backgroundPosition: "center",
                     }, onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => {
                         e.preventDefault();
                         setDrag(true);
-                    }, onDragLeave: () => setDrag(false), onDrop: onDropFile, children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-image-dropzone-content", children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: drag ? "solid/hand-holding" : "solid/images", className: "text-3xl" }), (0, jsx_runtime_1.jsx)("p", { className: "input-image-dropzone-text", children: drag ? "Letakkan di sini" : preview ? "Klik atau seret untuk ganti Gambar" : "Klik atau seret gambar" })] }), (0, jsx_runtime_1.jsx)("input", { id: randomId, ref: inputRef, type: "file", accept: "image/*", className: "hidden", disabled: disabled, onChange: onUpload })] }) }), preview && !disabled && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/times", paint: "danger", size: "sm", className: "absolute top-10 right-4", onClick: remove })), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage })), !isSm ? ((0, jsx_runtime_1.jsx)(Modal_component_1.ModalComponent, { show: openCrop, onClose: onCropCancel, title: "Sesuaikan Gambar", className: "w-max max-w-[350px]", children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(aspect.replace(":", "/")), onDone: onCropDone }) })) })) : ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: openCrop, onClose: onCropCancel, size: 400, children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(aspect.replace(":", "/")), onDone: onCropDone }) })) }))] }));
+                    }, onDragLeave: () => setDrag(false), onDrop: onDropFile, children: [preview && !containerAspect ? ((0, jsx_runtime_1.jsxs)("div", { className: "relative group w-full h-full flex items-center justify-center", children: [(0, jsx_runtime_1.jsx)("img", { src: preview, alt: "Preview", className: "w-full h-auto max-h-[400px] object-contain rounded-lg" }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col items-center justify-center text-white rounded-lg", children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/images", className: "text-3xl mb-2" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-center", children: "Klik atau seret untuk ganti Gambar" })] })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "input-image-dropzone-content", children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: drag ? "solid/hand-holding" : "solid/images", className: "text-3xl" }), (0, jsx_runtime_1.jsx)("p", { className: "input-image-dropzone-text", children: drag ? "Letakkan di sini" : preview ? "Klik atau seret untuk ganti Gambar" : "Klik atau seret gambar" })] })), (0, jsx_runtime_1.jsx)("input", { id: randomId, ref: inputRef, type: "file", accept: "image/*", className: "hidden", disabled: disabled, onChange: onUpload })] }) }), preview && !disabled && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/times", paint: "danger", size: "sm", className: "absolute top-10 right-4", onClick: remove })), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage })), !isSm ? ((0, jsx_runtime_1.jsx)(Modal_component_1.ModalComponent, { show: openCrop, onClose: onCropCancel, title: "Sesuaikan Gambar", className: "w-max max-w-[350px]", children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(currentAspect.replace(":", "/")), onDone: onCropDone }) })) })) : ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: openCrop, onClose: onCropCancel, size: 400, children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(currentAspect.replace(":", "/")), onDone: onCropDone }) })) }))] }));
 };
 exports.InputImageComponent = InputImageComponent;
 const CanvasCropper = ({ src, aspect, onDone, }) => {

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

@@ -58,7 +58,7 @@ 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"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skalfa/skalfa-component",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "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/input/InputImage.component.tsx

@@ -37,7 +37,7 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
 
   value,
   disabled,
-  aspect = "1/1",
+  aspect,
   invalid,
   validations,
 
@@ -59,6 +59,10 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
   const inputHandler                         =  useInputHandler(name, value, validations, register, true, unregister);
   const [invalidMessage, setInvalidMessage]  =  useValidation(inputHandler.value, validations, invalid, inputHandler.idle);
 
+  const isCroppingEnabled = !!aspect;
+  const currentAspect = aspect || "1/1";
+  const containerAspect = (preview && !isCroppingEnabled) ? undefined : currentAspect;
+
   useEffect(() => {
     if (value) {
       const url = typeof value === "object" ? URL.createObjectURL(value) : value;
@@ -91,7 +95,13 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
       return;
     }
 
-    openCropper(file);
+    if (isCroppingEnabled) {
+      openCropper(file);
+    } else {
+      const url = URL.createObjectURL(file);
+      setPreview(url);
+      onChange?.(file);
+    }
   };
 
   const onCropDone = (file: File) => {
@@ -117,7 +127,15 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
     setDrag(false);
 
     const file = e.dataTransfer.files?.[0];
-    file && openCropper(file);
+    if (!file) return;
+
+    if (isCroppingEnabled) {
+      openCropper(file);
+    } else {
+      const url = URL.createObjectURL(file);
+      setPreview(url);
+      onChange?.(file);
+    }
   };
 
   return (
@@ -157,8 +175,9 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
             pcn<CT>(className, "input")
           )}
           style={{
-            aspectRatio: aspect,
-            backgroundImage: preview ? `url(${preview})` : undefined,
+            position: "relative",
+            aspectRatio: containerAspect,
+            backgroundImage: preview && containerAspect ? `url(${preview})` : undefined,
             backgroundSize: "cover",
             backgroundPosition: "center",
           }}
@@ -170,10 +189,24 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
           onDragLeave={() => setDrag(false)}
           onDrop={onDropFile}
         >
-          <div className="input-image-dropzone-content">
-            <Icon icon={drag ? "solid/hand-holding" : "solid/images"} className="text-3xl" />
-            <p className="input-image-dropzone-text">{drag ? "Letakkan di sini" : preview  ? "Klik atau seret untuk ganti Gambar" : "Klik atau seret gambar"}</p>
-          </div>
+          {preview && !containerAspect ? (
+            <div className="relative group w-full h-full flex items-center justify-center">
+              <img
+                src={preview}
+                alt="Preview"
+                className="w-full h-auto max-h-[400px] object-contain rounded-lg"
+              />
+              <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col items-center justify-center text-white rounded-lg">
+                <Icon icon="solid/images" className="text-3xl mb-2" />
+                <p className="text-xs text-center">Klik atau seret untuk ganti Gambar</p>
+              </div>
+            </div>
+          ) : (
+            <div className="input-image-dropzone-content">
+              <Icon icon={drag ? "solid/hand-holding" : "solid/images"} className="text-3xl" />
+              <p className="input-image-dropzone-text">{drag ? "Letakkan di sini" : preview  ? "Klik atau seret untuk ganti Gambar" : "Klik atau seret gambar"}</p>
+            </div>
+          )}
 
           <input
             id={randomId}
@@ -209,7 +242,7 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
             <div className="p-4">
               <CanvasCropper
                 src={cropSrc}
-                aspect={eval(aspect.replace(":", "/"))}
+                aspect={eval(currentAspect.replace(":", "/"))}
                 onDone={onCropDone}
               />
             </div>
@@ -221,7 +254,7 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
             <div className="p-4">
               <CanvasCropper
                 src={cropSrc}
-                aspect={eval(aspect.replace(":", "/"))}
+                aspect={eval(currentAspect.replace(":", "/"))}
                 onDone={onCropDone}
               />
             </div>

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,