@ablogcms/media 3.2.28-beta.0

package/dist/chunk-KQNVYJOK.mjs

@@ -0,0 +1,1814 @@
+import {
+  getMediaTransport
+} from "./chunk-3SYVRD3N.mjs";
+
+// src/components/media-list/media-list.tsx
+import classnames from "classnames";
+import RangeSlider from "rc-slider";
+import dayjs from "dayjs";
+import "rc-slider/assets/index.css";
+import { Component, createRef } from "react";
+import { emit } from "@ablogcms/events";
+import { Grid, GridItem } from "@ablogcms/components/grid";
+import { formatBytes, parseQuery } from "@ablogcms/utils";
+import { notify } from "@ablogcms/notify";
+import { pending } from "@ablogcms/pending";
+import {
+  Menu,
+  MenuList,
+  MenuTrigger,
+  MenuDivider,
+  MenuItemCheckbox,
+  MenuItemRadioGroup,
+  MenuItemRadio,
+  MenuPopover
+} from "@ablogcms/components/dropdown-menu";
+import { Pagination, PaginationRoot, PaginationSummary } from "@ablogcms/components/pagination";
+import {
+  Filter,
+  FilterBody,
+  FilterContent,
+  FilterDetailButton,
+  FilterFooter,
+  FilterGroup,
+  FilterGroupTitle,
+  FilterInner,
+  FilterItem,
+  FilterItemLabel
+} from "@ablogcms/components/filter";
+import ConditionalWrap from "@ablogcms/components/conditional-wrap";
+import { RichSelect, CreatableSelect } from "@ablogcms/components/rich-select";
+import VisuallyHidden from "@ablogcms/components/visually-hidden";
+import { Slot } from "@ablogcms/components/slot-fill";
+import {
+  Table,
+  TableScrollable,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell
+} from "@ablogcms/components/table";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var delimiter = ",";
+var MediaList = class extends Component {
+  listRef;
+  static defaultProps = {
+    radioMode: false,
+    filetype: "all",
+    extensions: []
+  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      order: {
+        media_title: "asc",
+        media_last_modified: "desc",
+        media_path: "asc",
+        media_size: "asc",
+        media_filesize: "asc"
+      },
+      menu: {
+        image: true,
+        id: true,
+        filename: true,
+        tag: true,
+        last_modified: true,
+        upload_datetime: false,
+        imagesize: true,
+        filesize: true,
+        blogname: false
+      },
+      limit: 20,
+      displayPage: 6,
+      scale: 1,
+      selectedLabels: [],
+      year: "",
+      month: "",
+      filterMenuOpened: false,
+      toggleAll: false,
+      orderActive: "media_last_modified",
+      search: "",
+      labels: [],
+      items: props.items,
+      filteredOptions: [],
+      style: "table",
+      editMode: "",
+      filetype: props.filetype ? props.filetype : "all",
+      fileext: "all",
+      owner: false,
+      blogAxis: false,
+      oldItemId: null
+    };
+    this.listRef = createRef();
+  }
+  getOrderSelectBtnLabel() {
+    const { orderActive, order } = this.state;
+    const active = order[orderActive] === "asc" ? ACMS.i18n("media.asc") : ACMS.i18n("media.desc");
+    if (orderActive === "media_title") {
+      return `${ACMS.i18n("media.title")}\uFF08${active}\uFF09`;
+    }
+    if (orderActive === "media_last_modified") {
+      return `${ACMS.i18n("media.update_date")}\uFF08${active}\uFF09`;
+    }
+    if (orderActive === "media_datetime") {
+      return `${ACMS.i18n("media.created_date")}\uFF08${active}\uFF09`;
+    }
+    if (orderActive === "media_path") {
+      return `${ACMS.i18n("media.file_name")}\uFF08${active}\uFF09`;
+    }
+    if (orderActive === "media_filesize") {
+      return `${ACMS.i18n("media.file_size")}\uFF08${active}\uFF09`;
+    }
+    return ACMS.i18n("media.select");
+  }
+  setItem(item) {
+    const { media_id } = item;
+    if ("history" in window) {
+      history.replaceState(null, "", `#mid=${media_id}`);
+    }
+    getMediaTransport().fetchMediaDetail(media_id).then((res) => {
+      if (res.status === "failure") {
+        notify.danger(ACMS.i18n("media.get_media_error"));
+        return;
+      }
+      if (res.item && res.item.media_id) {
+        this.props.actions.setItem(res.item);
+      }
+    }).catch(() => {
+      notify.danger(ACMS.i18n("media.get_media_error"));
+    });
+    return false;
+  }
+  toggleCheck(item) {
+    const { items, radioMode } = this.props;
+    if (radioMode) {
+      const findItem = items.find((item2) => item2.checked);
+      if (findItem) {
+        this.props.actions.updateMediaList({ ...findItem, checked: !findItem.checked });
+      }
+    }
+    this.props.actions.updateMediaList({ ...item, checked: !item.checked });
+  }
+  toggleCheckFrom(fromItemId, toItem) {
+    const { items, radioMode } = this.props;
+    const { updateMediaList } = this.props.actions;
+    if (radioMode) {
+      return;
+    }
+    const fromIndex = items.findIndex((item) => {
+      if (item.media_id === fromItemId) {
+        return true;
+      }
+      return false;
+    });
+    const toIndex = items.findIndex((item) => {
+      if (item.media_id === toItem.media_id) {
+        return true;
+      }
+      return false;
+    });
+    const { checked } = toItem;
+    const nextChecked = !checked;
+    const minIndex = fromIndex > toIndex ? toIndex : fromIndex;
+    const maxIndex = fromIndex > toIndex ? fromIndex : toIndex;
+    items.forEach((item, index) => {
+      if (index >= minIndex && index <= maxIndex) {
+        updateMediaList({ ...item, checked: nextChecked });
+      }
+    });
+  }
+  toggleAllCheck() {
+    const { items, actions, radioMode } = this.props;
+    const { toggleAll } = this.state;
+    const all = !toggleAll;
+    this.setState({
+      toggleAll: all
+    });
+    if (radioMode) {
+      return;
+    }
+    if (all) {
+      actions.setMediaList(items.map((item) => ({ ...item, checked: true })));
+    } else {
+      actions.setMediaList(items.map((item) => ({ ...item, checked: false })));
+    }
+  }
+  async removeImgs() {
+    if (!confirm(ACMS.i18n("media.remove_media_confirm"))) {
+      return;
+    }
+    if (this.listRef.current === null) {
+      return;
+    }
+    const mediaIds = this.getSelectedItems().map((item) => String(item.media_id));
+    const gateResult = await emit("media.delete.before", { mediaIds });
+    if (gateResult.canceled) {
+      if (gateResult.reason) {
+        notify.danger(gateResult.reason);
+      }
+      return;
+    }
+    const fd = new FormData(this.listRef.current);
+    fd.append("ACMS_POST_Media_Index_Delete", "true");
+    fd.append("formToken", window.csrfToken);
+    const end = pending.splash(ACMS.i18n("media.deleting_media"));
+    try {
+      await getMediaTransport().deleteMedia(fd);
+      notify.info(ACMS.i18n("media.remove_media_success"));
+      void emit("media.delete.success", gateResult.event);
+      this.fetchMediaList();
+    } catch {
+      notify.danger(ACMS.i18n("media.remove_media_error"));
+    } finally {
+      end();
+    }
+  }
+  setOrder(target) {
+    const { state } = this;
+    const { order } = state;
+    const sortDirection = this.getNextSortDirection(target);
+    this.setState(
+      {
+        ...state,
+        orderActive: target,
+        order: {
+          ...order,
+          [target]: sortDirection
+        }
+      },
+      () => {
+        this.fetchMediaList();
+      }
+    );
+  }
+  checkOrder(orderActive) {
+    this.setState(
+      {
+        orderActive
+      },
+      () => {
+        this.fetchMediaList();
+      }
+    );
+  }
+  checkAscDesc(ascdesc) {
+    const { order, orderActive } = this.state;
+    order[orderActive] = ascdesc;
+    this.setState(
+      {
+        order
+      },
+      () => {
+        this.fetchMediaList();
+      }
+    );
+  }
+  getOrder() {
+    const { orderActive, order } = this.state;
+    if (orderActive === "media_title") {
+      return `file_name-${order[orderActive]}`;
+    }
+    if (orderActive === "media_last_modified") {
+      return `last_modified-${order[orderActive]}`;
+    }
+    if (orderActive === "media_datetime") {
+      return `upload_date-${order[orderActive]}`;
+    }
+    if (orderActive === "media_filesize") {
+      return `file_size-${order[orderActive]}`;
+    }
+    return "";
+  }
+  fetchMediaList(config = {}) {
+    const { year, month, limit, filetype, fileext, owner, blogAxis } = this.state;
+    const { actions, selectedTags: labels } = this.props;
+    const order = this.getOrder();
+    const tag = labels.reduce((accumulator, current) => {
+      if (!accumulator) {
+        return current;
+      }
+      return `${accumulator}/${current}`;
+    }, "");
+    const override = {
+      order,
+      tag,
+      limit,
+      filetype,
+      fileext,
+      owner,
+      blogAxis
+    };
+    if (year && month) {
+      override.date = `${year}/${month}`;
+    } else {
+      override.date = "";
+      override.year = year;
+      override.month = month;
+    }
+    if (!config.page) {
+      config.page = 1;
+    }
+    const settings = { ...config, ...override };
+    if (actions && actions.fetchMediaList) {
+      actions.fetchMediaList(settings);
+    }
+  }
+  getIsSorted(th) {
+    const { order, orderActive } = this.state;
+    if (orderActive === th) {
+      if (order[orderActive] === "asc") {
+        return "asc";
+      }
+      return "desc";
+    }
+    return false;
+  }
+  getNextSortDirection(th) {
+    const { order } = this.state;
+    return order[th] === "asc" ? "desc" : "asc";
+  }
+  changeStyle(style) {
+    this.setState({
+      style
+    });
+  }
+  getCheckedItemsLength() {
+    const { items } = this.props;
+    const checks = items.filter((item) => item.checked);
+    if (checks && checks.length) {
+      return checks.length;
+    }
+    return 0;
+  }
+  /**
+   * チェック済みかつ「実際にチェックボックスが描画される」アイテムのみを返す。
+   * `mode === 'edit'` のとき `!media_editable` の行はチェックボックス自体が描画されない
+   * （テーブル行の描画条件 `mode !== 'edit' || item.media_editable` と同じ判定）が、
+   * `toggleAllCheck()`（全選択）は編集可否を見ずに `checked` を立てるため、`props.items` の
+   * `checked` だけを見ると実際にフォーム送信される対象より多く数えてしまう。
+   * `media.delete.before`/`.success` の `mediaIds` と Slot `media.list.bulk-actions` の
+   * `selectedItems` は、実削除対象（フォームのチェックボックス）と一致させるためこちらを使う。
+   */
+  getSelectedItems() {
+    const { items, mode } = this.props;
+    return items.filter((item) => item.checked && (mode !== "edit" || item.media_editable));
+  }
+  onLabelChange(labels) {
+    const tags = labels.map((label) => label.value);
+    this.props.actions.setSelectedTags(tags);
+    this.getFilteredOptions(tags);
+  }
+  getFilteredOptions(tags) {
+    getMediaTransport().fetchMediaTags(tags).then((data) => {
+      const filteredOptions = data.map((item) => ({
+        value: item,
+        label: item
+      }));
+      this.setState({
+        filteredOptions
+      });
+    });
+  }
+  onChangeDisplayNumber(e) {
+    const { actions } = this.props;
+    const limit = parseInt(e.target.value, 10);
+    actions.setMediaConfig({
+      limit,
+      page: 1
+    });
+    this.setState({ limit });
+  }
+  onKeywordInput(e) {
+    if (!(e.target instanceof HTMLInputElement)) {
+      return;
+    }
+    const { actions } = this.props;
+    actions.setMediaConfig({
+      keyword: e.target.value
+    });
+  }
+  getArchives(archives) {
+    let years = [];
+    let months = [];
+    archives.forEach((archive) => {
+      const [year, month] = archive.split("-");
+      years.push(year);
+      months.push(month);
+    });
+    years = [...new Set(years)].sort();
+    months = [...new Set(months)].sort();
+    return { years, months };
+  }
+  onDateChange(value, type) {
+    if (type === "month") {
+      this.setState({
+        month: value
+      });
+    } else {
+      this.setState({
+        year: value
+      });
+    }
+  }
+  onAddedLabelsChange(labels) {
+    this.setState({
+      selectedLabels: labels.map((label) => label)
+    });
+  }
+  async addLabelToItems() {
+    if (this.listRef.current === null) {
+      return;
+    }
+    const { selectedLabels } = this.state;
+    const tags = selectedLabels.map((selectedLabel) => selectedLabel.value).join(",");
+    const fd = new FormData(this.listRef.current);
+    fd.append("tags", tags);
+    fd.append("ACMS_POST_Media_Index_Tags", "true");
+    fd.append("formToken", window.csrfToken);
+    try {
+      await getMediaTransport().addTagsToMedia(fd);
+      notify.info(ACMS.i18n("media.add_tags_to_media_success"));
+      this.fetchMediaList();
+    } catch {
+      notify.danger(ACMS.i18n("media.add_tags_to_media_error"));
+    }
+  }
+  getFileStyle = (item) => {
+    if (!item) {
+      return {};
+    }
+    if (item.media_ext.toLowerCase() === "pdf") {
+      return {
+        height: "70%",
+        width: "auto",
+        opacity: 1
+      };
+    }
+    return {
+      verticalAlign: "middle",
+      width: "70px",
+      opacity: 1
+    };
+  };
+  getImageStyle = (item) => {
+    if (!item || !item.width || !item.height) {
+      return {};
+    }
+    if (item.width > item.height) {
+      return {
+        width: "100%",
+        height: "auto",
+        opacity: 1,
+        transform: `translate(-50%,-50%) scale(${item.width / item.height})`
+      };
+    }
+    return {
+      width: "auto",
+      height: "100%",
+      opacity: 1,
+      transform: `translate(-50%,-50%) scale(${item.height / item.width})`
+    };
+  };
+  rowClick(e, item) {
+    const { oldItemId } = this.state;
+    const element = e.target;
+    if (element.tagName === "INPUT" || element.tagName === "I" || element.tagName === "LABEL") {
+      e.preventDefault();
+    }
+    if (element.tagName !== "BUTTON") {
+      if (e.shiftKey && oldItemId !== null) {
+        this.toggleCheckFrom(oldItemId, item);
+      } else {
+        this.toggleCheck(item);
+        this.setState({
+          oldItemId: item.media_id
+        });
+      }
+    }
+  }
+  componentDidUpdate(prevProps) {
+    const { style, scale, order, orderActive, limit, filterMenuOpened, owner, blogAxis } = this.state;
+    localStorage.setItem(
+      "acms-media-list",
+      JSON.stringify({
+        style,
+        scale,
+        order,
+        orderActive,
+        limit,
+        filterMenuOpened,
+        owner,
+        blogAxis
+      })
+    );
+    if (prevProps.items !== this.props.items) {
+      this.setItems(this.props.items);
+    }
+  }
+  componentDidMount() {
+    const storage = localStorage.getItem("acms-media-list");
+    const { selectedTags } = this.props;
+    if (!storage) {
+      this.fetchMediaList();
+      return;
+    }
+    if (location.hash) {
+      const { mid } = parseQuery(location.hash.slice(1));
+      if (mid) {
+        this.setItem({ media_id: mid });
+      }
+    }
+    const { style, scale, order, orderActive, limit, filterMenuOpened, owner, blogAxis } = JSON.parse(storage);
+    this.setState(
+      {
+        style,
+        scale,
+        order,
+        orderActive,
+        limit,
+        filterMenuOpened,
+        owner,
+        blogAxis
+      },
+      () => {
+        this.fetchMediaList();
+      }
+    );
+    if (selectedTags) {
+      this.getFilteredOptions(selectedTags);
+    }
+  }
+  loadImg(url) {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => {
+        resolve(img);
+      };
+      setTimeout(() => {
+        resolve(img);
+      }, 500);
+      img.src = url;
+    });
+  }
+  setItems(items) {
+    const newItems = items.map(async (item) => {
+      if ((item.media_type === "image" || item.media_type === "svg") && !item.width) {
+        const img = await this.loadImg(item.media_thumbnail);
+        if (img.naturalWidth && img.naturalHeight) {
+          return { ...item, width: img.naturalWidth, height: img.naturalHeight };
+        }
+        return { ...item, width: img.width, height: img.height };
+      }
+      return item;
+    });
+    Promise.all(newItems).then((items2) => {
+      this.setState({ items: items2 });
+    });
+  }
+  scaleChanged = (scale) => {
+    const newScale = Array.isArray(scale) ? scale[0] : scale;
+    this.setState({ scale: newScale });
+  };
+  getOptions = () => {
+    const { filteredOptions } = this.state;
+    const { tags, selectedTags } = this.props;
+    if (selectedTags.length) {
+      return filteredOptions;
+    }
+    return tags.map((tag) => ({
+      value: tag,
+      label: tag
+    }));
+  };
+  toggleMenu(menuItem) {
+    const { menu } = this.state;
+    const newMenu = { ...menu, [menuItem]: !menu[menuItem] };
+    this.setState({
+      menu: newMenu
+    });
+  }
+  render() {
+    const { mode, config, archives, tags, total, items, selectedTags, extensions } = this.props;
+    const { years, months } = this.getArchives(archives);
+    const { page, keyword } = config;
+    const {
+      style,
+      editMode,
+      scale,
+      selectedLabels,
+      items: stateItems,
+      limit,
+      menu,
+      owner,
+      blogAxis,
+      order,
+      orderActive,
+      oldItemId,
+      toggleAll,
+      filterMenuOpened,
+      filetype
+    } = this.state;
+    const checkedLength = this.getCheckedItemsLength();
+    const selectedItems = this.getSelectedItems();
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { id: "media-filter-form", role: "search", className: "acms-admin-form", children: /* @__PURE__ */ jsxs(Filter, { children: [
+        /* @__PURE__ */ jsxs(FilterBody, { children: [
+          /* @__PURE__ */ jsxs(FilterGroup, { children: [
+            /* @__PURE__ */ jsx(FilterGroupTitle, { children: ACMS.i18n("media.filter_search") }),
+            /* @__PURE__ */ jsxs(FilterContent, { fit: true, children: [
+              /* @__PURE__ */ jsxs(FilterItem, { children: [
+                /* @__PURE__ */ jsx(FilterItemLabel, { htmlFor: "filter-date", children: ACMS.i18n("media.created_date") }),
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex" }, children: [
+                  /* @__PURE__ */ jsx("div", { className: "acms-admin-inline-block acms-admin-margin-right-mini", children: /* @__PURE__ */ jsxs(
+                    "select",
+                    {
+                      id: "filter-date",
+                      className: "acms-admin-margin-right-mini",
+                      onChange: (e) => {
+                        this.onDateChange(e.target.value, "year");
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("option", { value: "", children: ACMS.i18n("media.year") }),
+                        years.map((year) => /* @__PURE__ */ jsx("option", { value: year, children: year }, year))
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx("label", { htmlFor: "filter-date-month", children: ACMS.i18n("media.month") }) }),
+                  /* @__PURE__ */ jsx("div", { className: "acms-admin-inline-block", children: /* @__PURE__ */ jsxs(
+                    "select",
+                    {
+                      id: "filter-date-month",
+                      onChange: (e) => {
+                        this.onDateChange(e.target.value, "month");
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("option", { value: "", children: ACMS.i18n("media.month") }),
+                        months.map((month) => /* @__PURE__ */ jsx("option", { value: month, children: month }, month))
+                      ]
+                    }
+                  ) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(FilterItem, { full: true, children: [
+                /* @__PURE__ */ jsx(FilterItemLabel, { htmlFor: "filter-tag", children: ACMS.i18n("media.tag") }),
+                /* @__PURE__ */ jsx("div", { className: "acms-admin-form-width-medium", children: /* @__PURE__ */ jsx(
+                  RichSelect,
+                  {
+                    isMulti: true,
+                    value: selectedTags.map((selectedTag) => ({
+                      label: selectedTag,
+                      value: selectedTag
+                    })),
+                    options: this.getOptions(),
+                    onChange: this.onLabelChange.bind(this),
+                    closeMenuOnSelect: false,
+                    placeholder: ACMS.i18n("media.tag_search_select_placeholder"),
+                    noOptionsMessage: () => ACMS.i18n("media.tag_select_no_options_message"),
+                    inputId: "filter-tag"
+                  }
+                ) })
+              ] })
+            ] })
+          ] }),
+          filterMenuOpened && /* @__PURE__ */ jsx("div", { id: "search-detail", children: /* @__PURE__ */ jsxs(FilterInner, { children: [
+            /* @__PURE__ */ jsxs(FilterGroup, { children: [
+              /* @__PURE__ */ jsx(FilterGroupTitle, { children: ACMS.i18n("media.detailed_condition") }),
+              /* @__PURE__ */ jsx(FilterContent, { children: /* @__PURE__ */ jsxs(FilterItem, { full: true, children: [
+                /* @__PURE__ */ jsx(FilterItemLabel, { htmlFor: "filter-keyword", children: ACMS.i18n("media.keyword") }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    placeholder: ACMS.i18n("media.search_by_keyword"),
+                    id: "filter-keyword",
+                    className: "acms-admin-form-width-full",
+                    value: keyword,
+                    onInput: this.onKeywordInput.bind(this)
+                  }
+                )
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxs(FilterGroup, { children: [
+              /* @__PURE__ */ jsx(FilterGroupTitle, { children: ACMS.i18n("media.narrow_down") }),
+              /* @__PURE__ */ jsxs(FilterContent, { children: [
+                /* @__PURE__ */ jsxs(FilterItem, { children: [
+                  /* @__PURE__ */ jsx(FilterItemLabel, { htmlFor: "filter-sort", children: ACMS.i18n("media.number_of_items") }),
+                  /* @__PURE__ */ jsxs("select", { id: "filter-sort", value: limit, onChange: this.onChangeDisplayNumber.bind(this), children: [
+                    /* @__PURE__ */ jsx("option", { value: "5", children: "5" }),
+                    /* @__PURE__ */ jsx("option", { value: "10", children: "10" }),
+                    /* @__PURE__ */ jsx("option", { value: "20", children: "20" }),
+                    /* @__PURE__ */ jsx("option", { value: "50", children: "50" }),
+                    /* @__PURE__ */ jsx("option", { value: "75", children: "75" }),
+                    /* @__PURE__ */ jsx("option", { value: "100", children: "100" }),
+                    /* @__PURE__ */ jsx("option", { value: "200", children: "200" }),
+                    /* @__PURE__ */ jsx("option", { value: "300", children: "300" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(FilterItem, { children: [
+                  /* @__PURE__ */ jsx(FilterItemLabel, { htmlFor: "filter-type", children: ACMS.i18n("media.type") }),
+                  /* @__PURE__ */ jsxs(
+                    "select",
+                    {
+                      id: "filter-type",
+                      disabled: this.props.filetype !== "all",
+                      defaultValue: filetype,
+                      onChange: (e) => {
+                        this.setState({
+                          filetype: e.target.value
+                        });
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("option", { value: "all", children: ACMS.i18n("media.all") }),
+                        /* @__PURE__ */ jsx("option", { value: "image", children: ACMS.i18n("media.image") }),
+                        /* @__PURE__ */ jsx("option", { value: "file", children: ACMS.i18n("media.file") })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(FilterItem, { children: [
+                  /* @__PURE__ */ jsx(FilterItemLabel, { htmlFor: "filter-ext", children: ACMS.i18n("media.extension") }),
+                  /* @__PURE__ */ jsxs(
+                    "select",
+                    {
+                      id: "filter-ext",
+                      onChange: (e) => {
+                        this.setState({
+                          fileext: e.target.value
+                        });
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("option", { value: "all", children: ACMS.i18n("media.all") }),
+                        extensions && extensions.map((extension) => /* @__PURE__ */ jsx("option", { value: extension, children: extension.toLowerCase() }, extension.toLowerCase()))
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(FilterItem, { children: /* @__PURE__ */ jsxs("label", { htmlFor: "filter-owner", className: "acms-admin-form-checkbox acms-admin-m-0", children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      id: "filter-owner",
+                      type: "checkbox",
+                      checked: owner,
+                      onChange: (e) => {
+                        this.setState({
+                          owner: e.target.checked
+                        });
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("i", { className: "acms-admin-ico-checkbox" }),
+                  ACMS.i18n("media.owner")
+                ] }) }),
+                ACMS.Config.sbid !== ACMS.Config.bid && /* @__PURE__ */ jsx(FilterItem, { children: /* @__PURE__ */ jsxs("label", { htmlFor: "filter-blog-axis", className: "acms-admin-form-checkbox acms-admin-m-0", children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      id: "filter-blog-axis",
+                      type: "checkbox",
+                      checked: blogAxis,
+                      onChange: (e) => {
+                        this.setState({
+                          blogAxis: e.target.checked
+                        });
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("i", { className: "acms-admin-ico-checkbox" }),
+                  ACMS.i18n("media.blog_axis")
+                ] }) })
+              ] })
+            ] })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs(FilterFooter, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "acms-admin-btn acms-admin-btn-info acms-admin-btn-search",
+              onClick: () => {
+                this.fetchMediaList();
+              },
+              children: ACMS.i18n("media.search")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FilterDetailButton,
+            {
+              type: "button",
+              onClick: (e) => {
+                e.preventDefault();
+                this.setState({
+                  filterMenuOpened: !filterMenuOpened
+                });
+              },
+              "aria-expanded": filterMenuOpened,
+              "aria-controls": "search-detail",
+              children: ACMS.i18n("media.detailed_search")
+            }
+          )
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "acms-admin-media-action-group", children: [
+        /* @__PURE__ */ jsxs("div", { className: "acms-admin-media-action-item acms-admin-media-action-item-fix", children: [
+          /* @__PURE__ */ jsxs("div", { className: "acms-admin-btn-group acms-admin-media-action-display-switch", role: "group", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: classnames("acms-admin-btn", {
+                  "acms-admin-btn-active": style === "table"
+                }),
+                onClick: this.changeStyle.bind(this, "table"),
+                "aria-pressed": style === "table",
+                "aria-label": ACMS.i18n("media.display_switch_list"),
+                children: /* @__PURE__ */ jsx("i", { className: "acms-admin-icon-list" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: classnames("acms-admin-btn", {
+                  "acms-admin-btn-active": style === "list"
+                }),
+                onClick: this.changeStyle.bind(this, "list"),
+                "aria-pressed": style === "list",
+                "aria-label": ACMS.i18n("media.display_switch_grid"),
+                children: /* @__PURE__ */ jsx("i", { className: "acms-admin-icon-grid" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "acms-admin-media-action-sort-select-wrap", children: [
+            /* @__PURE__ */ jsx("div", { className: "acms-admin-media-action-sort-select", children: style === "table" && /* @__PURE__ */ jsxs(Menu, { closeOnSelect: false, children: [
+              /* @__PURE__ */ jsx(MenuTrigger, { className: "acms-admin-btn", "aria-label": ACMS.i18n("media.open_config_menu"), children: /* @__PURE__ */ jsx("i", { className: "acms-admin-icon-config", "aria-hidden": "true" }) }),
+              /* @__PURE__ */ jsx(MenuPopover, { children: /* @__PURE__ */ jsxs(MenuList, { children: [
+                /* @__PURE__ */ jsx(
+                  MenuItemCheckbox,
+                  {
+                    value: "image",
+                    checked: menu.image,
+                    onCheckedChange: (_checked, value) => {
+                      this.toggleMenu(value);
+                    },
+                    children: ACMS.i18n("media.image2")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  MenuItemCheckbox,
+                  {
+                    value: "id",
+                    checked: menu.id,
+                    onCheckedChange: (_checked, value) => {
+                      this.toggleMenu(value);
+                    },
+                    children: "ID"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  MenuItemCheckbox,
+                  {
+                    value: "filename",
+                    checked: menu.filename,
+                    onCheckedChange: (_checked, value) => {
+                      this.toggleMenu(value);
+                    },
+                    children: ACMS.i18n("media.file_name")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  MenuItemCheckbox,
+                  {
+                    value: "tag",
+                    checked: menu.tag,
+                    onCheckedChange: (_checked, value) => {
+                      this.toggleMenu(value);
+                    },
+                    children: ACMS.i18n("media.tag")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  MenuItemCheckbox,
+                  {
+                    value: "last_modified",
+                    checked: menu.last_modified,
+                    onCheckedChange: (_checked, value) => {
+                      this.toggleMenu(value);
+                    },
+                    children: ACMS.i18n("media.updated_date")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  MenuItemCheckbox,
+                  {
+                    value: "upload_datetime",
+                    checked: menu.upload_datetime,
+                    onCheckedChange: (_checked, value) => {
+                      this.toggleMenu(value);
+                    },
+                    children: ACMS.i18n("media.created_date")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  MenuItemCheckbox,
+                  {
+                    value: "filesize",
+                    checked: menu.filesize,
+                    onCheckedChange: (_checked, value) => {
+                      this.toggleMenu(value);
+                    },
+                    children: ACMS.i18n("media.file_size")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  MenuItemCheckbox,
+                  {
+                    value: "blogname",
+                    checked: menu.blogname,
+                    onCheckedChange: (_checked, value) => {
+                      this.toggleMenu(value);
+                    },
+                    children: ACMS.i18n("media.blog_name")
+                  }
+                )
+              ] }) })
+            ] }) }),
+            /* @__PURE__ */ jsx("div", { className: "acms-admin-media-action-sort-select", style: { position: "relative" }, children: /* @__PURE__ */ jsxs(Menu, { closeOnSelect: false, children: [
+              /* @__PURE__ */ jsx(MenuTrigger, { type: "button", className: "acms-admin-select-btn", children: this.getOrderSelectBtnLabel() }),
+              /* @__PURE__ */ jsx(MenuPopover, { children: /* @__PURE__ */ jsxs(MenuList, { children: [
+                /* @__PURE__ */ jsxs(
+                  MenuItemRadioGroup,
+                  {
+                    value: orderActive,
+                    onValueChange: (value) => {
+                      this.checkOrder(value);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(MenuItemRadio, { value: "media_title", children: ACMS.i18n("media.title") }),
+                      /* @__PURE__ */ jsx(MenuItemRadio, { value: "media_last_modified", children: ACMS.i18n("media.updated_date") }),
+                      /* @__PURE__ */ jsx(MenuItemRadio, { value: "media_datetime", children: ACMS.i18n("media.created_date") }),
+                      /* @__PURE__ */ jsx(MenuItemRadio, { value: "media_filesize", children: ACMS.i18n("media.file_size") })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(MenuDivider, {}),
+                /* @__PURE__ */ jsxs(
+                  MenuItemRadioGroup,
+                  {
+                    value: order[orderActive],
+                    onValueChange: (value) => {
+                      this.checkAscDesc(value);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(MenuItemRadio, { value: "asc", children: ACMS.i18n("media.asc") }),
+                      /* @__PURE__ */ jsx(MenuItemRadio, { value: "desc", children: ACMS.i18n("media.desc") })
+                    ]
+                  }
+                )
+              ] }) })
+            ] }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "acms-admin-media-action-item acms-admin-media-action-item-middle", children: [
+          style === "list" && /* @__PURE__ */ jsx("div", { className: "acms-admin-media-action-range", children: /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", width: "100%", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx(VisuallyHidden, { children: ACMS.i18n("media.display_size") }),
+            /* @__PURE__ */ jsx(
+              "i",
+              {
+                className: "acms-admin-icon-unit-image",
+                style: { fontSize: "12px", color: "#777777", marginRight: "10px" }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              RangeSlider,
+              {
+                className: "acms-admin-range-slider",
+                min: 1,
+                max: 2,
+                step: 0.1,
+                value: scale,
+                onChange: this.scaleChanged
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "i",
+              {
+                className: "acms-admin-icon-unit-image",
+                style: { fontSize: "18px", color: "#777777", marginLeft: "10px" }
+              }
+            )
+          ] }) }),
+          style === "list" && /* @__PURE__ */ jsx("div", { className: "acms-admin-media-action-select-all", children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: this.toggleAllCheck.bind(this),
+              className: "acms-admin-media-grid-checkbox-wrap",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: classnames("acms-admin-media-grid-checkbox", {
+                      selected: toggleAll
+                    }),
+                    "aria-hidden": "true"
+                  }
+                ),
+                ACMS.i18n("media.select_all")
+              ]
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "acms-admin-form-group acms-admin-media-action-item acms-admin-media-action-item-left", children: /* @__PURE__ */ jsxs("div", { className: "acms-admin-form", children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx("label", { htmlFor: "media-action-select", children: ACMS.i18n("media.select") }) }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              id: "media-action-select",
+              className: "acms-admin-margin-right-mini",
+              value: editMode,
+              onChange: (e) => {
+                const { value } = e.target;
+                this.setState({
+                  editMode: value
+                });
+              },
+              children: [
+                /* @__PURE__ */ jsx("option", { children: ACMS.i18n("media.select") }),
+                /* @__PURE__ */ jsx("option", { value: "remove", children: ACMS.i18n("media.remove") }),
+                /* @__PURE__ */ jsx("option", { value: "tag", children: ACMS.i18n("media.add_tags") })
+              ]
+            }
+          ),
+          editMode === "remove" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            ACMS.i18n("media.checked_items").replace("$1", checkedLength.toString()),
+            "\xA0",
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "acms-admin-btn acms-admin-btn-danger",
+                onClick: this.removeImgs.bind(this),
+                children: ACMS.i18n("media.remove")
+              }
+            )
+          ] }),
+          editMode === "tag" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: { display: "inline-block", verticalAlign: "middle" },
+                className: "acms-admin-margin-right-mini",
+                children: ACMS.i18n("media.add_tags_to_checked_items").replace("$1", checkedLength.toString())
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  display: "inline-block",
+                  width: "200px",
+                  verticalAlign: "middle",
+                  marginRight: "5px"
+                },
+                children: /* @__PURE__ */ jsx(
+                  CreatableSelect,
+                  {
+                    isMulti: true,
+                    onChange: this.onAddedLabelsChange.bind(this),
+                    value: selectedLabels,
+                    options: tags.map((tag) => ({
+                      label: tag,
+                      value: tag
+                    })),
+                    placeholder: ACMS.i18n("media.tag_select_placeholder"),
+                    noOptionsMessage: () => ACMS.i18n("media.tag_select_no_options_message"),
+                    formatCreateLabel: (inputValue) => ACMS.i18n("media.add_tag", { name: inputValue }),
+                    isValidNewOption: (inputValue) => inputValue.trim().length > 0,
+                    closeMenuOnSelect: false,
+                    hideSelectedOptions: true
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("button", { type: "button", className: "acms-admin-btn", onClick: this.addLabelToItems.bind(this), children: "\u8FFD\u52A0" })
+          ] }),
+          /* @__PURE__ */ jsx(Slot, { name: "media.list.bulk-actions", fillProps: { selectedItems } })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          "form",
+          {
+            ref: this.listRef,
+            className: "acms-admin-media-list",
+            style: { display: style === "table" ? "block" : "none" },
+            children: /* @__PURE__ */ jsx(TableScrollable, { breakpoints: ["xs", "sm", "md"], children: /* @__PURE__ */ jsxs(Table, { variant: "list", hover: true, className: "adminTable acms-admin-media-table", children: [
+              /* @__PURE__ */ jsx(TableHeader, { heading: true, children: /* @__PURE__ */ jsxs(TableRow, { children: [
+                /* @__PURE__ */ jsx(TableHead, { nowrap: true, className: "acms-admin-media-row-check", children: mode === "edit" && /* @__PURE__ */ jsxs(
+                  "label",
+                  {
+                    htmlFor: "checkAll",
+                    "aria-label": "\u3059\u3079\u3066\u9078\u629E",
+                    className: "acms-admin-form-checkbox acms-admin-m-0",
+                    onChange: this.toggleAllCheck.bind(this),
+                    children: [
+                      /* @__PURE__ */ jsx("input", { id: "checkAll", type: "checkbox" }),
+                      /* @__PURE__ */ jsx("i", { className: "acms-admin-ico-checkbox" })
+                    ]
+                  }
+                ) }),
+                menu.image && /* @__PURE__ */ jsx(TableHead, { nowrap: true, className: "acms-admin-media-row-image", children: ACMS.i18n("media.image2") }),
+                menu.id && /* @__PURE__ */ jsx(TableHead, { nowrap: true, className: "acms-admin-media-row-id", children: "ID" }),
+                menu.filename && /* @__PURE__ */ jsx(
+                  TableHead,
+                  {
+                    className: "acms-admin-media-row-title",
+                    "aria-sort": this.getIsSorted("media_title") ? `${this.getIsSorted("media_title")}ending` : void 0,
+                    children: /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        className: "acms-admin-th-sort-btn",
+                        onClick: this.setOrder.bind(this, "media_title"),
+                        "data-next-sort": `${this.getNextSortDirection("media_title")}ending`,
+                        children: [
+                          ACMS.i18n("media.file_name"),
+                          /* @__PURE__ */ jsx("span", { className: "acms-admin-th-sort-btn-icon" }),
+                          /* @__PURE__ */ jsx(VisuallyHidden, { children: ACMS.i18n(`table.label.sort.${this.getIsSorted("media_title") || "none"}`) })
+                        ]
+                      }
+                    )
+                  }
+                ),
+                menu.tag && /* @__PURE__ */ jsx(TableHead, { className: "acms-admin-media-row-tag", children: ACMS.i18n("media.tag") }),
+                menu.last_modified && /* @__PURE__ */ jsx(
+                  TableHead,
+                  {
+                    nowrap: true,
+                    className: "acms-admin-media-row-date",
+                    "aria-sort": this.getIsSorted("media_last_modified") ? `${this.getIsSorted("media_last_modified")}ending` : void 0,
+                    children: /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        className: "acms-admin-th-sort-btn",
+                        onClick: this.setOrder.bind(this, "media_last_modified"),
+                        "data-next-sort": `${this.getNextSortDirection("media_last_modified")}ending`,
+                        children: [
+                          ACMS.i18n("media.updated_date"),
+                          /* @__PURE__ */ jsx("span", { className: "acms-admin-th-sort-btn-icon" }),
+                          /* @__PURE__ */ jsx(VisuallyHidden, { children: ACMS.i18n(`table.label.sort.${this.getIsSorted("media_last_modified") || "none"}`) })
+                        ]
+                      }
+                    )
+                  }
+                ),
+                menu.upload_datetime && /* @__PURE__ */ jsx(
+                  TableHead,
+                  {
+                    nowrap: true,
+                    className: "acms-admin-media-row-date",
+                    "aria-sort": this.getIsSorted("media_datetime") ? `${this.getIsSorted("media_datetime")}ending` : void 0,
+                    children: /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        className: "acms-admin-th-sort-btn",
+                        onClick: this.setOrder.bind(this, "media_datetime"),
+                        "data-next-sort": `${this.getNextSortDirection("media_datetime")}ending`,
+                        children: [
+                          ACMS.i18n("media.created_date"),
+                          /* @__PURE__ */ jsx("span", { className: "acms-admin-th-sort-btn-icon" }),
+                          /* @__PURE__ */ jsx(VisuallyHidden, { children: ACMS.i18n(`table.label.sort.${this.getIsSorted("media_datetime") || "none"}`) })
+                        ]
+                      }
+                    )
+                  }
+                ),
+                menu.filesize && /* @__PURE__ */ jsx(
+                  TableHead,
+                  {
+                    nowrap: true,
+                    className: "acms-admin-media-row-size",
+                    "aria-sort": this.getIsSorted("media_filesize") ? `${this.getIsSorted("media_filesize")}ending` : void 0,
+                    children: /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        className: "acms-admin-th-sort-btn",
+                        onClick: this.setOrder.bind(this, "media_filesize"),
+                        "data-next-sort": `${this.getNextSortDirection("media_filesize")}ending`,
+                        children: [
+                          ACMS.i18n("media.file_size"),
+                          /* @__PURE__ */ jsx("span", { className: "acms-admin-th-sort-btn-icon" }),
+                          /* @__PURE__ */ jsx(VisuallyHidden, { children: ACMS.i18n(`table.label.sort.${this.getIsSorted("media_filesize") || "none"}`) })
+                        ]
+                      }
+                    )
+                  }
+                ),
+                menu.blogname && /* @__PURE__ */ jsx(TableHead, { className: "acms-admin-media-row-blogname", children: ACMS.i18n("media.blog_name") }),
+                mode === "edit" && /* @__PURE__ */ jsx(TableHead, { nowrap: true, className: "acms-admin-media-row-action", style: { whiteSpace: "nowrap" }, children: ACMS.i18n("media.action") })
+              ] }) }),
+              /* @__PURE__ */ jsx(TableBody, { children: items.map((item) => /* @__PURE__ */ jsxs(
+                TableRow,
+                {
+                  onClick: (e) => {
+                    this.rowClick(e, item);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(TableCell, { nowrap: true, className: "acms-admin-media-row-check", children: [
+                      item.media_editable,
+                      (mode !== "edit" || item.media_editable) && /* @__PURE__ */ jsxs("label", { "aria-label": "\u9078\u629E", className: "acms-admin-form-checkbox acms-admin-m-0", children: [
+                        /* @__PURE__ */ jsx(
+                          "input",
+                          {
+                            type: "checkbox",
+                            name: "checks[]",
+                            value: `${item.media_bid}:${item.media_id}`,
+                            checked: item.checked,
+                            onChange: this.toggleCheck.bind(this, item),
+                            "aria-label": item.media_title || `${item.media_id}`
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("i", { className: "acms-admin-ico-checkbox" })
+                      ] })
+                    ] }),
+                    menu.image && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(TableCell, { nowrap: true, className: "acms-admin-media-row-image", children: /* @__PURE__ */ jsx(
+                      ConditionalWrap,
+                      {
+                        wrap: (chidren) => /* @__PURE__ */ jsx("a", { href: item.media_permalink, target: "_blank", rel: "noopener noreferrer", children: chidren }),
+                        condition: item.media_type === "file",
+                        children: /* @__PURE__ */ jsx("div", { className: "acms-admin-media-list-thumbnail-wrap", children: /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src: `${item.media_thumbnail}?date=${item.media_last_modified}`,
+                            className: "acms-admin-media-list-thumbnail",
+                            alt: ""
+                          }
+                        ) })
+                      }
+                    ) }) }),
+                    menu.id && /* @__PURE__ */ jsx(TableCell, { nowrap: true, className: "acms-admin-media-row-id", children: /* @__PURE__ */ jsx("span", { className: "acms-admin-label", children: item.media_id }) }),
+                    menu.filename && /* @__PURE__ */ jsx(TableCell, { className: "acms-admin-media-row-title", children: item.media_title }),
+                    menu.tag && /* @__PURE__ */ jsx(TableCell, { className: "acms-admin-media-row-tag", children: item.media_label && item.media_label.split(delimiter).map((label) => /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "acms-admin-label acms-admin-label-info",
+                        style: {
+                          display: "inline-block",
+                          marginRight: "5px",
+                          marginTop: "5px"
+                        },
+                        children: label
+                      },
+                      label
+                    )) }),
+                    menu.last_modified && /* @__PURE__ */ jsxs(TableCell, { nowrap: true, className: "acms-admin-media-row-date", children: [
+                      dayjs(item.media_last_modified).format("YYYY/MM/DD"),
+                      /* @__PURE__ */ jsx("br", {}),
+                      dayjs(item.media_last_modified).format("HH:mm")
+                    ] }),
+                    menu.upload_datetime && /* @__PURE__ */ jsxs(TableCell, { nowrap: true, className: "acms-admin-media-row-date", children: [
+                      dayjs(item.media_datetime).format("YYYY/MM/DD"),
+                      /* @__PURE__ */ jsx("br", {}),
+                      dayjs(item.media_datetime).format("HH:mm")
+                    ] }),
+                    menu.filesize && /* @__PURE__ */ jsxs(TableCell, { nowrap: true, className: "acms-admin-media-row-action", children: [
+                      item.media_filesize && /* @__PURE__ */ jsx(Fragment, { children: formatBytes(item.media_filesize) }),
+                      item.media_size && item.media_type === "image" && /* @__PURE__ */ jsxs("span", { style: { display: "block", marginTop: "5px" }, children: [
+                        item.media_size,
+                        "px"
+                      ] })
+                    ] }),
+                    menu.blogname && /* @__PURE__ */ jsx(TableCell, { className: "acms-admin-media-row-blogname", children: item.media_blog_name }),
+                    mode === "edit" && /* @__PURE__ */ jsx(TableCell, { nowrap: true, children: item.media_editable && /* @__PURE__ */ jsx("button", { type: "button", onClick: this.setItem.bind(this, item), className: "acms-admin-btn", children: ACMS.i18n("media.edit") }) })
+                  ]
+                },
+                item.media_id
+              )) })
+            ] }) })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "acms-admin-media-grid", style: { display: style === "table" ? "none" : "flex" }, children: items.map((item, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "acms-admin-media-grid-item",
+            style: { width: `${150 * scale}px`, height: `${150 * scale}px` },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: classnames("acms-admin-media-grid-figure", { selected: item.checked }),
+                  title: item.media_title,
+                  role: "button",
+                  tabIndex: 0,
+                  onClick: (e) => {
+                    if (e.shiftKey && oldItemId !== null) {
+                      this.toggleCheckFrom(oldItemId, item);
+                    } else {
+                      this.toggleCheck(item);
+                      this.setState({
+                        oldItemId: item.media_id
+                      });
+                    }
+                  },
+                  onKeyDown: (e) => {
+                    if (e.currentTarget !== document.activeElement) {
+                      return;
+                    }
+                    if (e.key === "Enter" || e.key === " ") {
+                      if (e.shiftKey && oldItemId !== null) {
+                        this.toggleCheckFrom(oldItemId, item);
+                      } else {
+                        this.toggleCheck(item);
+                        this.setState({
+                          oldItemId: item.media_id
+                        });
+                      }
+                      e.preventDefault();
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "acms-admin-media-grid-shadow" }),
+                    item.media_type === "file" && /* @__PURE__ */ jsxs("div", { className: "acms-admin-media-grid-img-wrap", children: [
+                      /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          className: "acms-admin-media-grid-file-img",
+                          src: item.media_thumbnail,
+                          style: this.getFileStyle(stateItems[index]),
+                          alt: ""
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "acms-admin-media-grid-filename", children: item.media_title })
+                    ] }),
+                    (item.media_type === "image" || item.media_type === "svg") && /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: `${item.media_thumbnail}?date=${item.media_last_modified}`,
+                        style: this.getImageStyle(stateItems[index]),
+                        id: `media-image-${index}`,
+                        alt: ""
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: classnames("acms-admin-media-grid-flame", { selected: item.checked }), children: [
+                      /* @__PURE__ */ jsx("div", { className: "acms-admin-media-grid-checkbox" }),
+                      mode === "edit" && item.media_editable && /* @__PURE__ */ jsx("div", { className: "acms-admin-media-edit-list-btn-wrap", children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: "acms-admin-media-edit-btn acms-admin-media-edit-list-btn",
+                          onClick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            this.setItem(item);
+                          },
+                          children: ACMS.i18n("media.edit")
+                        }
+                      ) })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("input", { type: "hidden", name: "checks[]", value: `${item.media_bid}:${item.media_id}` })
+            ]
+          },
+          item.media_id
+        )) }),
+        /* @__PURE__ */ jsx(Grid, { className: "acms-admin-margin-top-medium", children: /* @__PURE__ */ jsxs(
+          PaginationRoot,
+          {
+            page,
+            pageSize: limit,
+            total: Math.ceil(total / limit),
+            totalItems: total,
+            onChange: (page2) => this.fetchMediaList({
+              page: page2
+            }),
+            children: [
+              /* @__PURE__ */ jsx(GridItem, { col: { md: 6, xs: 12 }, children: /* @__PURE__ */ jsx(Pagination, {}) }),
+              /* @__PURE__ */ jsx(GridItem, { col: { md: 6, xs: 12 }, children: /* @__PURE__ */ jsx(PaginationSummary, {}) })
+            ]
+          }
+        ) })
+      ] })
+    ] });
+  }
+};
+
+// src/components/media-uploader/media-uploader.tsx
+import { Component as Component2 } from "react";
+import classNames from "classnames";
+import DOMPurify from "dompurify";
+import { emit as emit2 } from "@ablogcms/events";
+import { random, getExt, dataURItoBlob } from "@ablogcms/utils";
+import createPdf from "@ablogcms/lib/create-pdf";
+import runWithConcurrency from "@ablogcms/utils/run-with-concurrency";
+import ResizeImage from "@ablogcms/lib/resize-image-util";
+import readFiles from "@ablogcms/lib/read-files";
+import { CreatableSelect as CreatableSelect2 } from "@ablogcms/components/rich-select";
+import { DropZone } from "@ablogcms/components/drop-zone";
+import ProgressBar from "@ablogcms/components/progress-bar";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var delimiter2 = ",";
+var DEFAULT_UPLOAD_LIMIT = 100;
+var DEFAULT_UPLOAD_CONCURRENCY = 4;
+var MediaUploader = class extends Component2 {
+  static defaultProps = {
+    showUploadButton: true,
+    tags: [],
+    files: []
+  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      items: [],
+      label: props.label || "",
+      loading: false,
+      imgsOnStage: false,
+      hasUploadedItems: false
+      // has already uploaded images
+    };
+  }
+  // 一度にアップロードできる件数の上限（config 由来。未設定・不正値はデフォルトにフォールバック）
+  get uploadLimit() {
+    const value = parseInt(String(ACMS.Config.mediaUploadLimit ?? ""), 10);
+    return Number.isFinite(value) && value > 0 ? value : DEFAULT_UPLOAD_LIMIT;
+  }
+  // 同時にアップロードする本数（並列度。config 由来。未設定・不正値はデフォルトにフォールバック）
+  get uploadConcurrency() {
+    const value = parseInt(String(ACMS.Config.mediaUploadConcurrency ?? ""), 10);
+    return Number.isFinite(value) && value > 0 ? value : DEFAULT_UPLOAD_CONCURRENCY;
+  }
+  // 全体のアップロード進捗（完了件数・失敗件数・総件数・全体パーセント）
+  get uploadProgress() {
+    const { items } = this.state;
+    const total = items.length;
+    if (total === 0) {
+      return { done: 0, total: 0, percent: 0, errorCount: 0 };
+    }
+    const isDone = (item) => Boolean(item.uploadedItem) || item.progress < 0;
+    const done = items.filter(isDone).length;
+    const errorCount = items.filter((item) => item.progressError).length;
+    const sum = items.reduce((acc, item) => acc + (isDone(item) ? 100 : Math.max(0, Math.min(100, item.progress))), 0);
+    return { done, total, percent: Math.round(sum / total), errorCount };
+  }
+  // アップロード中のページ離脱・リロードに確認ダイアログを出す（途中中断の防止）
+  handleBeforeUnload = (event) => {
+    if (this.state.loading) {
+      event.preventDefault();
+      event.returnValue = "";
+    }
+  };
+  componentDidMount() {
+    window.addEventListener("beforeunload", this.handleBeforeUnload);
+    if (this.props.files) {
+      readFiles(this.props.files).then((extededFiles) => {
+        this.onComplete(extededFiles);
+      });
+    }
+  }
+  componentWillUnmount() {
+    window.removeEventListener("beforeunload", this.handleBeforeUnload);
+  }
+  async createPdfThumbnail(file) {
+    const pdf = await createPdf(file, 1);
+    return pdf;
+  }
+  upload(blob, label, name, item) {
+    const { largeSize } = this.props;
+    return new Promise(async (resolve, reject) => {
+      const fd = new FormData();
+      fd.append("ACMS_POST_Media_Upload", "true");
+      if (label) {
+        fd.append("tags", label);
+      }
+      const ext = getExt(name);
+      if (ext.toLowerCase() === "pdf") {
+        const image = await this.createPdfThumbnail(blob);
+        if (image) {
+          fd.append("media_pdf_thumbnail", dataURItoBlob(image));
+          fd.append("pdf_page", "1");
+        }
+      }
+      fd.append("size", `${largeSize}`);
+      fd.append("file", blob, name);
+      fd.append("formToken", window.csrfToken);
+      this.setProgressBar(item, 0);
+      getMediaTransport().uploadMedia(fd, {
+        onUploadProgress: (e) => {
+          if (typeof e.total === "number") {
+            this.setProgressBar(item, 70 * (e.loaded / e.total));
+          }
+        }
+      }).then((res) => {
+        if (res && res.data) {
+          if ("status" in res.data && res.data.status === "failure") {
+            throw new Error(res.data.message);
+          }
+          const mediaItem = res.data;
+          this.setProgressBar(item, 100);
+          setTimeout(() => {
+            resolve(mediaItem);
+          }, 300);
+          return;
+        }
+        throw new Error(ACMS.i18n("media.error.unknown"));
+      }).catch((err) => {
+        console.error(err);
+        this.setProgressBar(item, 100, true);
+        if (err instanceof Error) {
+          alert(err.message);
+        }
+        reject(err instanceof Error ? err : new Error(String(err)));
+      });
+    });
+  }
+  setProgressBar(item, progress, progressError = false) {
+    this.setState((prev) => {
+      const index = prev.items.findIndex((file) => file.id === item.id);
+      if (index === -1) {
+        return null;
+      }
+      const copyItems = prev.items.slice();
+      copyItems[index] = { ...copyItems[index], progress, progressError };
+      return { items: copyItems };
+    });
+  }
+  removeFile(file) {
+    this.setState((prev) => ({
+      items: prev.items.filter((item) => item.idx !== file.idx)
+    }));
+  }
+  setUploadedItem(file, uploadedItem) {
+    this.setState((prev) => {
+      const index = prev.items.findIndex((item) => item.idx === file.idx);
+      if (index === -1) {
+        return null;
+      }
+      const copyItems = prev.items.slice();
+      copyItems[index] = { ...copyItems[index], uploadedItem, progress: -1 };
+      return { items: copyItems };
+    });
+  }
+  editItem(item) {
+    if (item.uploadedItem) {
+      this.props.actions.setItem(item.uploadedItem);
+    }
+  }
+  async uploadItems() {
+    const { items, label } = this.state;
+    const { actions } = this.props;
+    const gateResult = await emit2("media.upload.before", { files: items.map((item) => item.file) });
+    if (gateResult.canceled) {
+      if (gateResult.reason) {
+        alert(gateResult.reason);
+      }
+      return [];
+    }
+    const allowedFiles = new Set(gateResult.event.files);
+    const targetItems = items.filter((item) => allowedFiles.has(item.file));
+    const resizeImage = new ResizeImage();
+    this.setState({
+      loading: true,
+      hasUploadedItems: true
+    });
+    const [resizeType, largeSize] = ACMS.Config.lgImg.split(":");
+    const tasks = targetItems.map((item) => async () => {
+      const { name, filetype, file } = item;
+      const isHeic = filetype === "image" && /(heic|heif)/i.test(file.type);
+      const isSvg = filetype === "image" && file.type.includes("svg");
+      const isGif = filetype === "image" && file.type.includes("gif");
+      try {
+        let uploadData;
+        if (filetype === "image") {
+          if (isHeic) {
+            if (!(item.blob instanceof Blob)) {
+              return null;
+            }
+            uploadData = item.blob;
+          } else if (isSvg) {
+            const text = await file.text();
+            const clean = DOMPurify.sanitize(text, { USE_PROFILES: { svg: true, svgFilters: true } });
+            uploadData = new Blob([clean], { type: "image/svg+xml" });
+          } else if (isGif) {
+            uploadData = file;
+          } else {
+            const { blob, resize } = await resizeImage.getBlobFromFile(file, resizeType, parseInt(largeSize, 10));
+            uploadData = resize && ACMS.Config.mediaClientResize !== "off" ? blob : file;
+          }
+        } else {
+          uploadData = file;
+        }
+        const uploadedItem = await this.upload(uploadData, label, name, item);
+        this.setUploadedItem(item, uploadedItem);
+        return uploadedItem;
+      } catch {
+        return null;
+      }
+    });
+    const results = await runWithConcurrency(tasks, this.uploadConcurrency);
+    this.setState({
+      loading: false
+    });
+    actions.fetchMediaList();
+    const uploadedItems = results.filter((result) => result !== null);
+    await emit2("media.upload.success", { items: uploadedItems });
+    return uploadedItems;
+  }
+  onComplete(files) {
+    let items = [
+      ...this.state.items,
+      ...files.map(
+        (file) => ({
+          file: file.file,
+          filetype: file.filetype,
+          preview: file.filetype === "image" ? file.preview : "",
+          blob: file.filetype === "image" ? file.blob : null,
+          // for heic
+          name: file.file.name,
+          size: file.file.size,
+          idx: -1,
+          id: "",
+          progress: 0,
+          progressError: false
+        })
+      )
+    ].filter((item) => {
+      if (item.uploadedItem) {
+        return false;
+      }
+      return true;
+    }).map((item, index) => ({
+      ...item,
+      idx: index,
+      id: random(10)
+    }));
+    items = Array.from(
+      new Map(items.map((item) => [`${item.file.name}:${item.file.size}:${item.file.lastModified}`, item])).values()
+    );
+    const limit = this.uploadLimit;
+    if (items.length > limit) {
+      alert(ACMS.i18n("media.more_than_limit_not_allowed", { limit }));
+      items = items.slice(0, limit);
+    }
+    if (items.length > 0) {
+      this.setState({ items, hasUploadedItems: false, imgsOnStage: true });
+    }
+  }
+  makeTags(label) {
+    if (!label) {
+      return null;
+    }
+    const labels = label.split(delimiter2);
+    return labels.map((label2) => ({
+      value: label2,
+      label: label2
+    }));
+  }
+  addTags(tags) {
+    const label = tags.reduce((val, tag, idx) => {
+      if (idx === 0) {
+        return tag.value;
+      }
+      return `${val}${delimiter2}${tag.value}`;
+    }, "");
+    this.setState({
+      label
+    });
+  }
+  removeUploadedItems() {
+    this.setState((prev) => ({
+      items: prev.items.filter((item) => !item.uploadedItem)
+    }));
+  }
+  // 全体進捗テキストの出し分け（進行中 / 完了 / 一部失敗）
+  renderOverallText() {
+    const overall = this.uploadProgress;
+    const processed = overall.total > 0 && overall.done + overall.errorCount === overall.total;
+    if (!processed) {
+      return ACMS.i18n("media.upload_overall_progress", { done: overall.done, total: overall.total });
+    }
+    if (overall.errorCount > 0) {
+      return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        ACMS.i18n("media.upload_done_count", { done: overall.done }),
+        /* @__PURE__ */ jsx2("span", { className: "acms-admin-text-danger", children: ACMS.i18n("media.upload_failed_count", { failed: overall.errorCount }) })
+      ] });
+    }
+    return ACMS.i18n("media.upload_all_complete", { total: overall.total });
+  }
+  render() {
+    const { items, label, hasUploadedItems, imgsOnStage } = this.state;
+    const { showUploadButton, tags } = this.props;
+    const overall = this.uploadProgress;
+    return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx2("div", { className: "clearfix", style: { marginBottom: "10px" }, children: /* @__PURE__ */ jsx2("div", { style: { padding: "0 10px" }, children: /* @__PURE__ */ jsx2(
+        CreatableSelect2,
+        {
+          isMulti: true,
+          options: (tags || []).map((tag) => ({
+            label: tag,
+            value: tag
+          })),
+          value: this.makeTags(label),
+          onChange: this.addTags.bind(this),
+          placeholder: ACMS.i18n("media.tag_select_placeholder"),
+          formatCreateLabel: (inputValue) => ACMS.i18n("media.add_tag", { name: inputValue }),
+          isValidNewOption: (inputValue) => inputValue.trim().length > 0,
+          noOptionsMessage: () => ACMS.i18n("media.tag_select_no_options_message"),
+          closeMenuOnSelect: false,
+          hideSelectedOptions: true,
+          menuPortalTarget: document.body
+        }
+      ) }) }),
+      hasUploadedItems && items.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "acms-admin-media-upload-overall", style: { padding: "0 10px", marginBottom: "10px" }, children: [
+        /* @__PURE__ */ jsx2(ProgressBar, { value: overall.percent, variant: "info", striped: true, animated: true }),
+        /* @__PURE__ */ jsx2("p", { className: "acms-admin-media-upload-overall-text", children: this.renderOverallText() })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: "acms-admin-media-upload-container-wrap", children: /* @__PURE__ */ jsxs2("div", { className: "acms-admin-media-upload-container", children: [
+        /* @__PURE__ */ jsx2("div", { className: "acms-admin-media-upload-item", children: /* @__PURE__ */ jsx2("div", { className: "acms-admin-media-upload-item-inner", children: /* @__PURE__ */ jsx2(DropZone, { onComplete: this.onComplete.bind(this) }) }) }),
+        items.map((item) => /* @__PURE__ */ jsx2("div", { className: "acms-admin-media-upload-item", children: /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: classNames("acms-admin-media-upload-item-inner", {
+              "-progress": item.progress > 0
+            }),
+            style: { position: "relative" },
+            children: [
+              item.progress > 0 && /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: "0",
+                    left: "0",
+                    width: "100%",
+                    boxSizing: "border-box",
+                    zIndex: 2
+                  },
+                  children: /* @__PURE__ */ jsx2("div", { className: "acms-admin-loading-bar acms-admin-active", children: /* @__PURE__ */ jsx2(
+                    "div",
+                    {
+                      className: classNames("acms-admin-loading-bar-inner", {
+                        "-alert": item.progressError
+                      }),
+                      style: { width: `${item.progress}%` }
+                    }
+                  ) })
+                }
+              ),
+              !item.uploadedItem && /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  className: "acms-admin-media-upload-cancel",
+                  onClick: this.removeFile.bind(this, item),
+                  "aria-label": ACMS.i18n("media.remove_file")
+                }
+              ),
+              item.uploadedItem && /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  className: "acms-admin-media-edit-btn acms-admin-media-edit-upload-btn",
+                  onClick: this.editItem.bind(this, item),
+                  children: ACMS.i18n("media.edit")
+                }
+              ),
+              item.filetype === "image" && /* @__PURE__ */ jsx2("div", { className: "acms-admin-media-upload-bg", style: { backgroundImage: `url(${item.preview})` } }),
+              item.filetype !== "image" && /* @__PURE__ */ jsx2("div", { className: "acms-admin-media-upload-bg", children: /* @__PURE__ */ jsx2(
+                "img",
+                {
+                  src: `${ACMS.Config.root}themes/system/images/fileicon/file.png`,
+                  className: "acms-admin-media-upload-file",
+                  alt: ""
+                }
+              ) }),
+              /* @__PURE__ */ jsx2("div", { className: "acms-admin-media-overlay" }),
+              /* @__PURE__ */ jsx2("div", { className: "acms-admin-media-upload-caption", children: /* @__PURE__ */ jsx2("p", { className: "acms-admin-media-upload-caption-text", children: item.name }) })
+            ]
+          }
+        ) }, item.id))
+      ] }) }),
+      items.length === 0 && /* @__PURE__ */ jsx2("p", { style: { textAlign: "center" }, children: ACMS.i18n("media.no_staged_media") }),
+      showUploadButton && imgsOnStage && /* @__PURE__ */ jsx2("div", { className: "acms-admin-media-upload-footer clearfix", children: /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "acms-admin-btn-admin acms-admin-btn-admin-primary acms-admin-float-right",
+          onClick: this.uploadItems.bind(this),
+          disabled: hasUploadedItems,
+          children: ACMS.i18n("media.upload")
+        }
+      ) })
+    ] });
+  }
+};
+
+export {
+  MediaList,
+  MediaUploader
+};
+//# sourceMappingURL=chunk-KQNVYJOK.mjs.map