@wipco/sdui 0.28.0 → 0.30.0

package/dist/{chunk-6S5CFNFM.js → chunk-CVCP52OD.js}

@@ -1,5 +1,5 @@
 import { includesLooseSearch } from './chunk-BD75U73S.js';
-import { useSduiAdapter, hostFetchOf } from './chunk-DVOPZFQS.js';
+import { useSduiAdapter, hostFetchOf } from './chunk-DKPNFEVU.js';
 import { Icon, Button, Input, Spinner } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import { useId, useRef, useMemo, useState, useEffect } from 'react';

package/dist/{chunk-DVOPZFQS.js → chunk-DKPNFEVU.js}

@@ -96,5 +96,10 @@ function hostFetchOf(adapter) {
   if (!hostFetch || hostFetch === defaultAdapter.fetch) return null;
   return hostFetch;
 }
+function hostRawFetchOf(adapter) {
+  const hostRawFetch = adapter?.rawFetch;
+  if (!hostRawFetch || hostRawFetch === defaultAdapter.rawFetch) return null;
+  return hostRawFetch;
+}
 
-export { DEV, SduiAdapterContext, assetResolverOf, defaultAdapter, hostFetchOf, isSafeNavigationTarget, resolveAdapter, useSduiAdapter, useSduiAssetResolver, useSduiSandbox };
+export { DEV, SduiAdapterContext, assetResolverOf, defaultAdapter, hostFetchOf, hostRawFetchOf, isSafeNavigationTarget, resolveAdapter, useSduiAdapter, useSduiAssetResolver, useSduiSandbox };

package/dist/chunk-DQVDS2VP.js

@@ -0,0 +1,400 @@
+import { ImageLightbox } from './chunk-XPBZMECW.js';
+import { useSduiSandbox, useSduiAdapter, hostRawFetchOf, defaultAdapter, useSduiAssetResolver } from './chunk-DKPNFEVU.js';
+import { Spinner, Icon, IconButton } from './chunk-WIDDHR7L.js';
+import { boxed } from './chunk-SAN4IX6N.js';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var THUMB_SIZE = 72;
+function matchesAccept(file, accept) {
+  const rules = accept.split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean);
+  if (rules.length === 0) return true;
+  const type = file.type.toLowerCase();
+  const name = file.name.toLowerCase();
+  return rules.some((rule) => {
+    if (rule.startsWith(".")) return name.endsWith(rule);
+    if (rule.endsWith("/*")) return type.startsWith(rule.slice(0, -1));
+    return type === rule;
+  });
+}
+function localId() {
+  return `local-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}
+function unwrapUploaded(payload) {
+  if (typeof payload !== "object" || payload === null || Array.isArray(payload)) return null;
+  const body = payload;
+  if ("id" in body || "url" in body) return body;
+  const objectKeys = Object.keys(body).filter(
+    (key) => typeof body[key] === "object" && body[key] !== null && !Array.isArray(body[key])
+  );
+  if (objectKeys.length !== 1) return body;
+  return body[objectKeys[0]];
+}
+function FileDropzoneImpl({
+  upload,
+  fileField = "file",
+  localFallbackOn503 = false,
+  endpoint,
+  value,
+  onChange,
+  onBusyChange,
+  maxCount,
+  accept = "image/*",
+  disabled = false,
+  hint,
+  deleteEndpoint,
+  onRemove
+}) {
+  const sandbox = useSduiSandbox();
+  const adapter = useSduiAdapter();
+  const hostRaw = hostRawFetchOf(adapter);
+  const rawFetch = hostRaw ?? defaultAdapter.rawFetch;
+  const canUpload = hostRaw !== null || upload !== void 0;
+  const resolveAsset = useSduiAssetResolver();
+  const [internalItems, setInternalItems] = useState(value ?? []);
+  const items = value ?? internalItems;
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+  const [busy, setBusy] = useState(false);
+  const [progress, setProgress] = useState(null);
+  const [warnings, setWarnings] = useState([]);
+  const [localMode, setLocalMode] = useState(!endpoint);
+  const [dragOver, setDragOver] = useState(false);
+  const [hovering, setHovering] = useState(false);
+  const [hoverItemId, setHoverItemId] = useState(null);
+  const inputRef = useRef(null);
+  const dragDepthRef = useRef(0);
+  const createdUrlsRef = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    const created = createdUrlsRef.current;
+    return () => created.forEach((url) => URL.revokeObjectURL(url));
+  }, []);
+  const atCapacity = maxCount !== void 0 && items.length >= maxCount;
+  const canAdd = !disabled && !busy && !atCapacity;
+  const commit = useCallback(
+    (next) => {
+      itemsRef.current = next;
+      setInternalItems(next);
+      onChange?.(next);
+    },
+    [onChange]
+  );
+  const runQueue = useCallback(
+    async (queue, baseWarnings) => {
+      setBusy(true);
+      onBusyChange?.(true);
+      const failures = [];
+      let local = localMode || !endpoint || sandbox || !canUpload;
+      try {
+        for (let index = 0; index < queue.length; index += 1) {
+          const file = queue[index];
+          setProgress({ current: index + 1, total: queue.length });
+          if (!local && upload) {
+            try {
+              const item = await upload(file);
+              if (item && typeof item.id === "string" && typeof item.url === "string") {
+                commit([...itemsRef.current, { name: file.name, ...item }]);
+              } else {
+                failures.push(`${file.name} (\uC5C5\uB85C\uB354\uAC00 \uD56D\uBAA9\uC744 \uC8FC\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4)`);
+              }
+            } catch (error) {
+              failures.push(`${file.name} (${error instanceof Error ? error.message : "\uC5C5\uB85C\uB4DC \uC2E4\uD328"})`);
+            }
+            continue;
+          }
+          if (!local && endpoint) {
+            try {
+              const formData = new FormData();
+              formData.append(fileField, file, file.name);
+              const res = await rawFetch(endpoint, { method: "POST", body: formData });
+              if (res.status === 503 && localFallbackOn503) {
+                local = true;
+                setLocalMode(true);
+              } else if (!res.ok) {
+                failures.push(`${file.name} (${res.status})`);
+                continue;
+              } else {
+                const json = await res.json().catch(() => null);
+                const body = unwrapUploaded(json);
+                const id = body?.id;
+                const url2 = body?.url;
+                if ((typeof id === "string" || typeof id === "number") && typeof url2 === "string") {
+                  commit([...itemsRef.current, { id: String(id), url: url2, name: file.name }]);
+                } else {
+                  failures.push(`${file.name} (\uC751\uB2F5 \uD615\uC2DD \uC624\uB958)`);
+                }
+                continue;
+              }
+            } catch {
+              failures.push(`${file.name} (\uB124\uD2B8\uC6CC\uD06C \uC624\uB958)`);
+              continue;
+            }
+          }
+          const url = URL.createObjectURL(file);
+          createdUrlsRef.current.add(url);
+          commit([...itemsRef.current, { id: localId(), url, name: file.name }]);
+        }
+      } finally {
+        setProgress(null);
+        setBusy(false);
+        onBusyChange?.(false);
+      }
+      if (failures.length > 0) {
+        setWarnings([...baseWarnings, `\uC5C5\uB85C\uB4DC \uC2E4\uD328: ${failures.join(", ")}`]);
+      }
+    },
+    [commit, endpoint, localMode, onBusyChange, sandbox, upload, rawFetch, canUpload, fileField, localFallbackOn503]
+  );
+  const handleFiles = useCallback(
+    (fileList) => {
+      const files = Array.from(fileList);
+      if (files.length === 0) return;
+      const nextWarnings = [];
+      const matched = files.filter((file) => matchesAccept(file, accept));
+      const rejectedCount = files.length - matched.length;
+      if (rejectedCount > 0) {
+        nextWarnings.push(
+          `\uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 \uD615\uC2DD\uC774\uB77C ${rejectedCount}\uAC1C \uD30C\uC77C\uC744 \uC81C\uC678\uD588\uC2B5\uB2C8\uB2E4 (\uD5C8\uC6A9: ${accept})`
+        );
+      }
+      let queue = matched;
+      if (maxCount !== void 0) {
+        const remaining = Math.max(0, maxCount - itemsRef.current.length);
+        if (queue.length > remaining) {
+          nextWarnings.push(
+            `\uCD5C\uB300 ${maxCount}\uAC1C\uAE4C\uC9C0 \uCCA8\uBD80\uD560 \uC218 \uC788\uC5B4 ${queue.length - remaining}\uAC1C\uB97C \uC81C\uC678\uD588\uC2B5\uB2C8\uB2E4`
+          );
+          queue = queue.slice(0, remaining);
+        }
+      }
+      setWarnings(nextWarnings);
+      if (queue.length === 0) return;
+      void runQueue(queue, nextWarnings);
+    },
+    [accept, maxCount, runQueue]
+  );
+  const removeItem = useCallback(
+    (item) => {
+      const forget = () => {
+        commit(itemsRef.current.filter((current) => current.id !== item.id));
+        if (createdUrlsRef.current.has(item.url)) {
+          URL.revokeObjectURL(item.url);
+          createdUrlsRef.current.delete(item.url);
+        }
+      };
+      if (deleteEndpoint && !item.id.startsWith("local-")) {
+        void (async () => {
+          try {
+            const res = await rawFetch(`${deleteEndpoint}/${item.id}`, { method: "DELETE" });
+            if (!res.ok && res.status !== 404) {
+              setWarnings([`${item.name ?? "\uCCA8\uBD80"} \uC0AD\uC81C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4 (${res.status})`]);
+              return;
+            }
+          } catch {
+            setWarnings([`${item.name ?? "\uCCA8\uBD80"} \uC0AD\uC81C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4 \u2014 \uC5F0\uACB0\uC744 \uD655\uC778\uD558\uC138\uC694`]);
+            return;
+          }
+          forget();
+          onRemove?.();
+        })();
+        return;
+      }
+      forget();
+    },
+    [commit, deleteEndpoint, onRemove]
+  );
+  const openPicker = () => {
+    if (canAdd) inputRef.current?.click();
+  };
+  const showLocalCaption = localMode || items.some((item) => item.id.startsWith("local-"));
+  const dropTinted = canAdd && (dragOver || hovering);
+  return /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-2)" }, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept,
+        multiple: maxCount !== 1,
+        hidden: true,
+        disabled: !canAdd,
+        onChange: (event) => {
+          const selected = event.currentTarget.files;
+          if (selected && selected.length > 0) handleFiles(selected);
+          event.currentTarget.value = "";
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "button",
+        tabIndex: canAdd ? 0 : -1,
+        "aria-disabled": !canAdd,
+        "aria-label": "\uC774\uBBF8\uC9C0 \uCCA8\uBD80",
+        onClick: openPicker,
+        onKeyDown: (event) => {
+          if (canAdd && (event.key === "Enter" || event.key === " ")) {
+            event.preventDefault();
+            openPicker();
+          }
+        },
+        onMouseEnter: () => setHovering(true),
+        onMouseLeave: () => setHovering(false),
+        onDragEnter: (event) => {
+          event.preventDefault();
+          if (!canAdd) return;
+          dragDepthRef.current += 1;
+          setDragOver(true);
+        },
+        onDragOver: (event) => event.preventDefault(),
+        onDragLeave: () => {
+          dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+          if (dragDepthRef.current === 0) setDragOver(false);
+        },
+        onDrop: (event) => {
+          event.preventDefault();
+          dragDepthRef.current = 0;
+          setDragOver(false);
+          if (!canAdd) return;
+          handleFiles(event.dataTransfer.files);
+        },
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "var(--wp-space-2)",
+          padding: "var(--wp-space-6)",
+          border: `var(--wp-border-w) dashed ${dragOver ? "var(--wp-border-brand)" : "var(--wp-border-subtle)"}`,
+          borderRadius: "var(--wp-radius-md)",
+          background: dropTinted ? "var(--wp-surface-brand-tint)" : "var(--wp-surface-card)",
+          cursor: canAdd ? "pointer" : "not-allowed",
+          opacity: disabled ? 0.55 : 1,
+          transition: "var(--wp-transition-surface)",
+          textAlign: "center"
+        },
+        title: disabled ? "\uBE44\uD65C\uC131\uD654\uB41C \uC0C1\uD0DC\uC785\uB2C8\uB2E4" : atCapacity ? `\uCD5C\uB300 ${maxCount}\uAC1C\uAE4C\uC9C0 \uCCA8\uBD80\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4` : void 0,
+        children: busy && progress ? /* @__PURE__ */ jsx(Spinner, { label: `(${progress.current}/${progress.total}) \uC5C5\uB85C\uB4DC \uC911` }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: "cloud-upload",
+              size: 24,
+              style: { color: dropTinted ? "var(--wp-text-brand)" : "var(--wp-text-muted)" }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: { color: "var(--wp-text-default)" }, children: atCapacity ? `\uCD5C\uB300 ${maxCount}\uAC1C\uAE4C\uC9C0 \uCCA8\uBD80\uD588\uC2B5\uB2C8\uB2E4` : "\uD074\uB9AD\uD558\uAC70\uB098 \uC774\uBBF8\uC9C0\uB97C \uB04C\uC5B4\uB2E4 \uB193\uC73C\uC138\uC694" }),
+          hint ? /* @__PURE__ */ jsx("span", { className: "wp-caption", children: hint }) : null
+        ] })
+      }
+    ),
+    warnings.map((warning) => /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "wp-caption",
+        style: {
+          color: "var(--wp-text-warning)",
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "var(--wp-space-1)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "triangle-alert", size: 14 }),
+          warning
+        ]
+      },
+      warning
+    )),
+    showLocalCaption ? /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "wp-caption",
+        style: { display: "inline-flex", alignItems: "center", gap: "var(--wp-space-1)" },
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "unplug", size: 14 }),
+          "\uBC31\uC5D4\uB4DC \uBBF8\uC5F0\uB3D9 \u2014 \uC784\uC2DC \uBBF8\uB9AC\uBCF4\uAE30"
+        ]
+      }
+    ) : null,
+    items.length > 0 ? /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--wp-space-2)" }, children: items.map((item) => {
+      const thumbSrc = resolveAsset(item.url, {
+        component: "FileDropzone",
+        prop: "src",
+        kind: "attribute"
+      });
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: { position: "relative", width: THUMB_SIZE, height: THUMB_SIZE },
+          onMouseEnter: () => setHoverItemId(item.id),
+          onMouseLeave: () => setHoverItemId((current) => current === item.id ? null : current),
+          children: [
+            thumbSrc === null ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-label": item.name ?? "\uCCA8\uBD80 \uBBF8\uB9AC\uBCF4\uAE30 \uC5C6\uC74C",
+                role: "img",
+                style: {
+                  display: "block",
+                  width: THUMB_SIZE,
+                  height: THUMB_SIZE,
+                  borderRadius: "var(--wp-radius-md)",
+                  border: "var(--wp-border-w) solid var(--wp-border-subtle)",
+                  background: "var(--wp-surface-sunken)"
+                }
+              }
+            ) : /* @__PURE__ */ jsx(
+              ImageLightbox,
+              {
+                src: thumbSrc,
+                alt: item.name,
+                thumbStyle: {
+                  width: THUMB_SIZE,
+                  height: THUMB_SIZE,
+                  objectFit: "cover",
+                  display: "block",
+                  borderRadius: "var(--wp-radius-md)",
+                  border: "var(--wp-border-w) solid var(--wp-border-subtle)"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  position: "absolute",
+                  top: "var(--wp-space-1)",
+                  right: "var(--wp-space-1)",
+                  background: "var(--wp-surface-card)",
+                  borderRadius: "var(--wp-radius-sm)",
+                  boxShadow: "var(--wp-shadow-sm)",
+                  opacity: hoverItemId === item.id ? 1 : 0,
+                  transition: "opacity var(--wp-duration-fast) var(--wp-ease-out)"
+                },
+                children: /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    icon: "trash-2",
+                    label: `\uC0AD\uC81C${item.name ? ` \u2014 ${item.name}` : ""}`,
+                    variant: "danger",
+                    size: "xs",
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      removeItem(item);
+                    },
+                    onFocus: () => setHoverItemId(item.id)
+                  }
+                )
+              }
+            )
+          ]
+        },
+        item.id
+      );
+    }) }) : null
+  ] });
+}
+var FileDropzone = boxed(FileDropzoneImpl, "FileDropzone");
+
+export { FileDropzone, unwrapUploaded };